Saya cuba menggunakan reka letak fleksibel ringkas yang terdiri daripada pengepala, grid kandungan 2x2, dan kemudian bar sisi. Apabila lebar tetingkap lebih kecil daripada saiz tertentu, bar sisi harus bergerak ke bahagian bawah skrin.
Pada masa ini, apabila saiz itu dicapai, jika ketinggian tetingkap dibuat terlalu kecil, kandungan grid akan bertindih di atas pengepala, tetapi saya tidak tahu mengapa ini berlaku. Skrin hendaklah hanya saiz ketinggian paparan, tetapi menggerakkan bar sisi menyebabkannya mengembang.
@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%;
}
}
}
}
Ini adalah kod lengkap dalam jsfiddle
(Hanya ubah saiz tetingkap untuk melihat bagaimana grid bertindih di atas tajuk)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Salam ^^ Saya membina ini untuk anda. Adakah ini yang anda mahukan?
*{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>