带有独立滚动框的 CSS 网格布局
我有一个基本布局，由顶部导航、侧面导航和内容组成。内容和侧面导航都比页面高。我想确保整个页面没有滚动条，但侧面导航和内容 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回答
-
拉莫斯之舞
您可以添加以下 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 -
皈依舞
我通过使用 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>
随时随地看视频慕课网APP
相关分类
Html5