Flexbox項目在視窗過短時會溢出容器，同時側邊欄無法保持底部對齊

Question

我正在嘗試使用一個簡單的彈性佈局，其中包括一個標題、一個2x2的內容網格，然後是側邊欄。當視窗的寬度小於某個特定大小時，側邊欄應該會移動到螢幕底部。目前，一旦達到該大小，如果將視窗的高度調得太小，網格內容將會重疊在標題上方，但我不知道為什麼會這樣。螢幕應該只是視圖高度的大小，但側邊欄的移動會導致其擴展。 @media(max-width:960px){.main-screen{height:100vh

P粉652495194 · Answer

你好 ^^ 我為你構建了這個。這是你想要的嗎？

*{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;}
}



    Header




    
        Div1
        Div2
    
    
        Div3
        Div4
    



    Sidebar

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學