我有3 div1header和Sidebar。main content我用過flexbox。.main有100vh height，.sidebar有100px height，.main-content有 100% height。但在移動設備上查看時，sidebar和之間會顯示空白main-content。.main { min-height: 100vh; background-color: red; display: flex; flex-wrap: wrap;}.sidebar { background-color: blue; height: 100px; width: 100%;}.main-content { background-color: yellow; height: 100%; width: 100%;}@media (min-width: 768px) { .main-content{ width: 80%;} .sidebar { width: 20% }}<div>Header</div><div class="main"> <div class="sidebar"> sidebar </div> <div class="main-content"> main-content </div></div>
4 回答
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
您需要添加flex-direction: column到main. 并使用flex-grow: 1main-content 來覆蓋剩余空間（如果你想要的話）
默認屬性值為row。所以主欄和側邊欄并排并且高度相等，等于其容器的高度（默認的彈性行為）
.main {
min-height: 100vh;
background-color: red;
display: flex;
flex-wrap: wrap;
flex-direction:column;
}
.sidebar {
background-color: blue;
height: 100px;
width: 100%;
}
.main-content {
background-color: yellow;
flex-grow:1;
width: 100%;
}
@media (min-width:768px) {
.main-content{
width: 80%;}
.sidebar {
width: 20%
}
.main {
flex-direction:row;
}
}
<div>Header</div>
<div class="main">
<div class="sidebar">
sidebar
</div>
<div class="main-content">
main-content
</div>
</div>
滄海一幻覺
TA貢獻1824條經驗 獲得超5個贊
嘗試這個
@media (min-width: 768px) {
.main-content,
.sidebar {
width: 100%
height: 100%
}
}
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
對于height具有百分比值的設置（如.sidebar和.main-content），這些 ( ) 的父元素.main需要定義一個height設置，作為其百分比值的參考。min-height在這種情況下還不夠。
因此，在 中.main，您可以更改min-height: 100vh為height: 100vh并添加overflow-y: visible以使其變得更大。
.main {
height: 100vh;
overflow-y:visible;
background-color: red;
display: flex;
flex-wrap: wrap;
}
.sidebar {
background-color: blue;
height: 100px;
width: 100%;
}
.main-content {
background-color: yellow;
height: 100%;
width: 100%;
}
@media (min-width: 768px) {
.main-content{
width: 80%;}
.sidebar {
width: 20%
}
}
<div>Header</div>
<div class="main">
<div class="sidebar">
sidebar
</div>
<div class="main-content">
main-content
</div>
</div>
- 4 回答
- 0 關注
- 268 瀏覽
添加回答
舉報
0/150
提交
取消