我正在嘗試使用一個簡單的彈性佈局，其中包括一個標題、一個2x2的內容網格，然後是側邊欄。當視窗的寬度小於某個特定大小時，側邊欄應該會移動到螢幕底部。
目前，一旦達到該大小，如果將視窗的高度調得太小，網格內容將會重疊在標題上方，但我不知道為什麼會這樣。螢幕應該只是視圖高度的大小，但側邊欄的移動會導致其擴展。
@media (max-width:960px) {
.main-screen {
height: 100vh;
display: flex;
flex-direction: column-reverse;
.toolbar {
padding: 10px;
height: 90px;
width: auto;
}
.body {
display: flex;
.grid {
flex: 1;
max-height: 36vh;
}
.row1, .row2 {
flex: 1;
height: 10%;
max-width: 100%;
}
}
}
}
這是在jsfiddle中的完整程式碼
(只要調整視窗大小，就可以看到網格如何重疊在標題上方)
你好 ^^ 我為你構建了這個。這是你想要的嗎？
*{margin: 0px; padding: 0px;} html{height: 100%; width: 100%;} body{background-color: lightblue;} /* Header, Main Content, Nav/Sidebar */ header{background-color: lightgray; height: 50px;} .Main{background-color: darkblue; display: grid; grid-template-columns: 1fr 80px;} nav{background-color: pink; width: 100%; outline: 5px solid white;} /* Rows */ .Main .Row1, .Main .Row2{display: grid; grid-template-columns: 50% 50%; height: 120px;} /* Row 1 */ .Main .Row1 .Div1{margin: 5px; background-color: lightgreen;} .Main .Row1 .Div2{margin: 5px; background-color: forestgreen;} /* Row 2 */ .Main .Row2 .Div3{margin: 5px; background-color: forestgreen;} .Main .Row2 .Div4{margin: 5px; background-color: lightgreen;} /* Smaller Size */ @media (max-width:960px) { .Main{background-color: blue; grid-template-columns: auto;} nav{height: 50px;} }<body> <header> <h1>Header</h1> </header> <section class="Main"> <div> <div class="Row1"> <div class="Div1">Div1</div> <div class="Div2">Div2</div> </div> <div class="Row2"> <div class="Div3">Div3</div> <div class="Div4">Div4</div> </div> </div> <nav> <h1>Sidebar</h1> </nav> </section> </body>