I'm trying to use a simple flex layout that consists of a header, a 2x2 content grid, and then a sidebar. When the width of the window is smaller than a certain size, the sidebar should move to the bottom of the screen.
Currently, once that size is reached, if the height of the window is made too small, the grid content will overlap above the header, but I don't know why this is the case. The screen should only be the size of the view's height, but moving the sidebar causes it to expand.
@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%;
}
}
}
}
This is the complete code in jsfiddle
(Just resize the window to see how the grid overlaps above the title)
P粉6524951942024-03-31 12:37:11
Hello ^^ I built this for you. Is this what you want?
*{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>