我有一個(gè)基本布局，由頂部導(dǎo)航、側(cè)面導(dǎo)航和內(nèi)容組成。內(nèi)容和側(cè)面導(dǎo)航都比頁(yè)面高。我想確保整個(gè)頁(yè)面沒有滾動(dòng)條，但側(cè)面導(dǎo)航和內(nèi)容 div 都有自己獨(dú)立的滾動(dòng)條用于查看內(nèi)容。我嘗試了 CSS 溢出屬性的各種組合，但無(wú)法使其工作。請(qǐng)注意position: relative;導(dǎo)航上的 ，以確保其陰影位于側(cè)面導(dǎo)航的頂部。<!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貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
您可以添加以下 CSS：
body {
height: 100vh;
}
#side-nav,
#content {
max-height: calc(100vh - 200px);
overflow-y: scroll;
}
使用高度概念來(lái)實(shí)現(xiàn)這一目標(biāo)：您使用 100vh 獲得高度的 100%，然后減去 200px，這是您定義的導(dǎo)航高度。
這是一個(gè)可用的 Codepen：https ://codepen.io/alezuc/pen/MWaKMbE
皈依舞
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊
我通過(guò)使用 Alessio 的答案找到了解決方案，即使用 calc 來(lái)計(jì)算高度。我還需要確保側(cè)面導(dǎo)航位于包裝器中，以便overflow-y: scroll;可以應(yīng)用于內(nèi)容。這是一個(gè)完整的工作示例：
<!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 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消