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

Sometimes, we want to make a div fill the height of the remaining screen space with CSS

We’ll look at how to make a div fill the height of the remaining screen space with CSS, in this article.

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

First we use the flexbox, To make a div fill the height of the remaining screen space with CSS .

For instance, we can 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

And then we use flexbox, to make a div fill the height of the remaining screen space with CSS.

Leave a Reply