我有一个基本布局，由顶部导航、侧面导航和内容组成。内容和侧面导航都比页面高。我想确保整个页面没有滚动条，但侧面导航和内容 div 都有自己独立的滚动条用于查看内容。我尝试了 CSS 溢出属性的各种组合，但无法使其工作。请注意position: relative;导航上的 ，以确保其阴影位于侧面导航的顶部。<!DOCTYPE html><html> <head> <style> .box-shadow-z1 { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .box-shadow-z3 { box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); } body { margin: 0; padding: 0; background-color: rgb(197, 197, 197); display: grid; grid-template-columns: 300px auto; grid-template-rows: auto; grid-template-areas: "nav nav" "side-nav content"; } nav { grid-area: nav; background-color: white; position: relative; /* this is to ensure the shadow is on top */ width: 100%; height: 200px; } #side-nav { grid-area: side-nav; background-color: white; height: 1000px; } #content { grid-area: content; padding: 20px; } #actual-content { background-color: white; height: 2000px; } </style> </head> <body> <nav class="box-shadow-z3"></nav> <div id="side-nav" class="box-shadow-z1">side nav</div> <div id="content"><div id="actual-content" class="box-shadow-z1">content</div></div> </body></html>
2 回答
拉莫斯之舞
TA贡献1820条经验 获得超10个赞
您可以添加以下 CSS：
body {
height: 100vh;
}
#side-nav,
#content {
max-height: calc(100vh - 200px);
overflow-y: scroll;
}
使用高度概念来实现这一目标：您使用 100vh 获得高度的 100%，然后减去 200px，这是您定义的导航高度。
这是一个可用的 Codepen：https ://codepen.io/alezuc/pen/MWaKMbE
皈依舞
TA贡献1851条经验 获得超3个赞
我通过使用 Alessio 的答案找到了解决方案，即使用 calc 来计算高度。我还需要确保侧面导航位于包装器中，以便overflow-y: scroll;可以应用于内容。这是一个完整的工作示例：
<!DOCTYPE html>
<html>
<head>
<style>
.box-shadow-z1 {
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.box-shadow-z3 {
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
body {
margin: 0;
padding: 0;
background-color: rgb(197, 197, 197);
display: grid;
grid-template-columns: 300px auto;
grid-template-rows: 100px calc(100vh - 100px);
grid-template-areas:
"nav nav"
"side-nav content";
}
nav {
grid-area: nav;
background-color: white;
position: relative; /* this is to ensure the shadow is on top */
width: 100%;
}
#side-nav {
grid-area: side-nav;
background-color: white;
overflow-y: scroll;
}
#side-nav-content {
height: 10000px;
}
#content {
grid-area: content;
padding: 20px;
overflow-y: scroll;
}
#actual-content {
background-color: white;
height: 2000px;
}
</style>
</head>
<body>
<nav class="box-shadow-z3"></nav>
<div id="side-nav" class="box-shadow-z1"><div id="side-nav-content">side nav</div></div>
<div id="content"><div id="actual-content" class="box-shadow-z1">content</div></div>
</body>
</html>
- 2 回答
- 0 关注
- 99 浏览
添加回答
举报
0/150
提交
取消