This question already has an answer here:
I want make divs like first photo: but when I use 100% for height of yellow and blue divs they came out of screen like second photo: what should I do?
This question already has an answer here:
I want make divs like first photo: but when I use 100% for height of yellow and blue divs they came out of screen like second photo: what should I do?
If you just wanted to address the hight issue you could use vh
combined with calc
.
.header {
height: 60px;
}
.content {
height: calc(100vh -60px);
}
this would fill the height of the page minus 60px.
Heres an example; https://jsfiddle.net/0ndbw3to/
flex
parent (body
in this case) to min-height: 100vh
and set its direction to column
so children stackmain
) to flex-grow: 1
so it takes up all available space, but not more than what's availableflexbox
es using the default row
directionjustify-content: flex-end;
body, html { margin: 0 }
body, header, main {
display: flex;
}
header, main {
justify-content: flex-end;
}
.logo, .menu-box {
flex-basis: 60px;
}
body {
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
background-color: #ccc;
}
.logo {
height: 60px;
background-color: lightgreen;
}
.menu-box {
background-color: green;
}
<header>
<div class="logo"></div>
</header>
<main>
<aside class="menu-box"></aside>
</main>
A simple solution using CSS Grid layout
(for current support see here):
Set the layout height as 100vh.
grid-template-columns: 1fr 60px
: sets the columns - the logo and menu box at 60px and the header and content take the remaining space horizontally.
grid-template-rows: 60px 1fr
: set the rows - the header and the logo at 60px and the content and the menu box take the remaining space vertically.See demo below:
body {
margin: 0; /* remove the default browser margin */
}
.wrapper {
display: grid;
grid-template-columns: 1fr 60px; /* set the columns */
grid-template-rows: 60px 1fr; /* set the rows */
height: 100vh; /* set the height of the layout */
}
/* presentation styles */
.wrapper>*{border:1px solid}.header{background:#00f}.logo{background:orange}.content{background:#f0f8ff}.aside{background:grey}
<div class="wrapper">
<div class="header"></div>
<div class="logo"></div>
<div class="content"></div>
<div class="aside"></div>
</div>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!