Ich versuche, ein einfaches Flex-Layout zu verwenden, das aus einer Kopfzeile, einem 2x2-Inhaltsraster und dann einer Seitenleiste besteht. Wenn die Breite des Fensters eine bestimmte Größe unterschreitet, sollte die Seitenleiste an den unteren Bildschirmrand verschoben werden.
Sobald diese Größe erreicht ist und die Höhe des Fensters zu klein gemacht wird, überlappt derzeit der Rasterinhalt über der Kopfzeile, aber ich weiß nicht, warum das passiert. Der Bildschirm sollte nur die Größe der Ansichtshöhe haben, aber durch Verschieben der Seitenleiste wird diese vergrößert.
@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%;
}
}
}
}
Dies ist der vollständige Code in jsfiddle
(Ändern Sie einfach die Fenstergröße, um zu sehen, wie sich das Raster über dem Titel überlappt)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你好 ^^ 我为你构建了这个。这是你想要的吗？
*{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>