Sometimes, we want to stretch div height to fill parent div with CSS.
In this article, we’ll look at how to stretch div height to fill parent div with CSS.
How to stretch div height to fill parent div with CSS?
To stretch div height to fill parent div with CSS, we use flexbox.
For instance, we write
<body>
<div id="root" />
</body>
to add a div in the body element.
Then we write
html,
body {
height: 100%;
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%;
}
to make the body element a flex container with display: flex;.
And then we stretch the items inside to fill the body element with align-items: stretch;.
Conclusion
To stretch div height to fill parent div with CSS, we use flexbox.
