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 use flexbox.
For instance, we write
<body>
<div>header</div>
<div class="content"></div>
</body>
to add the body element with some divs.
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 to vertical with flex-direction: column;.
Then we make the div with class content fill the remaining space with flex-grow: 1;.
Conclusion
To make a div fill the height of the remaining screen space with CSS, we use flexbox.