Sometimes, we want to make div height occupy parent’s remaining height with CSS.
In this article, we’ll look at how to make div height occupy parent’s remaining height with CSS.
How to make div height occupy parent’s remaining height with CSS?
To make div height occupy parent’s remaining height with CSS, we use flexbox.
For instance, we write
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
to add nested divs.
Then we write
#container {
display: flex;
flex-direction: column;
}
#down {
flex-grow: 1;
}
to make the outer div a flex container with display: flex;.
We set the flex direction to vertical with flex-direction: column;.
And then we make the div with ID down fill the remaining height of the parent with flex-grow: 1;.
Conclusion
To make div height occupy parent’s remaining height with CSS, we use flexbox.
