這是我的 CSS
.header {
overflow: hidden;
height: 60px;
background: #292940;
color: #fff;
}
.container {
flex: 1;
display: flex;
}
.sidenav {
width: 15%;
background-color: white;
}
@media (max-width: 640px) {
.sidenav {
display: none;
}
}
.main {
background-color: #f4f6f8;
padding: 20px 30px;
flex: 1 1 100px;
order: 1;
width: 85%;
}
@media (max-width: 640px) {
.main {
margin-left: 0;
padding: 10px;
}
}
如果有更多內容，這很好用。但如果右側內容較少，則無法 100%。左側面板高度根據右側內容自動更改
如果我設定高度 height: 100vh;
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
這是什么表現。不是 100% 的高度
如何解決這個問題？提前致謝
uj5u.com熱心網友回復：
請嘗試：
.sidenav {
height: 100%;
position: fixed;
}
uj5u.com熱心網友回復：
只需將側面板高度設定為 DOM 100% 高度即可。
.sidenav {
width: 15%;
height: 100vh;
background-color: white;
}
如果您希望在滾動時將 sidenav 放在一邊，然后將其位置設定為 fixed
.sidenav {
width: 15%;
height: 100vh;
position: fixed;
background-color: white;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344725.html
標籤：css