How to make a div fill the height of the remaining screen space with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *