我正在嘗試使用一個(gè)簡(jiǎn)單的彈性佈局，其中包括一個(gè)標(biāo)題、一個(gè)2x2的內(nèi)容網(wǎng)格，然後是側(cè)邊欄。當(dāng)視窗的寬度小於某個(gè)特定大小時(shí)，側(cè)邊欄應(yīng)該會(huì)移動(dòng)到螢?zāi)坏撞俊?
目前，一旦達(dá)到該大小，如果將視窗的高度調(diào)得太小，網(wǎng)格內(nèi)容將會(huì)重疊在標(biāo)題上方，但我不知道為什麼會(huì)這樣。螢?zāi)粦?yīng)該只是視圖高度的大小，但側(cè)邊欄的移動(dòng)會(huì)導(dǎo)致其擴(kuò)展。
@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中的完整程式碼
(只要調(diào)整視窗大小，就可以看到網(wǎng)格如何重疊在標(biāo)題上方)
1
0
0
你好 ^^ 我為你構(gòu)建了這個(gè)。這是你想要的嗎？
*{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>
