How to stretch div height to fill parent div with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.