我有一個基本布局，由頂部導航、側面導航和內容組成。內容和側面導航都比頁面高。我想確保整個頁面沒有滾動條，但側面導航和內容 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 關注
- 218 瀏覽
添加回答
舉報
0/150
提交
取消