Sometimes, we want to make a div fill the height of the remaining screen space with CSS.
In this article, we’ll look at how to make a div fill the height of the remaining screen space with CSS.
How to make a div fill the height of the remaining screen space with CSS?
To make a div fill the height of the remaining screen space with CSS, we can use flexbox.
For instance, we write
<body>
<div>header</div>
<div class="content"></div>
</body>
to add divs into the body element.
Then we write
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
to make the body element a flex container with display: flex.
We set the flex direction with flex-direction: column; to apply flexbox styles from top to bottom.
Then we add the flex-grow: 1; CSS style to the div with class content so that it fills the remaining height of the screen.
Conclusion
To make a div fill the height of the remaining screen space with CSS, we can use flexbox.
