How to make a div always full screen with CSS?

Spread the love

Sometimes, we want to make a div always full screen with CSS.

In this article, we’ll look at how to make a div always full screen with CSS.

How to make a div always full screen with CSS?

To make a div always full screen with CSS, we use flexbox.

For instance, we write

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

to make the body element a flex container with display: flex;.

Then we make the divs inside the body element fit the remaining width of the screen with flex: 1;.

Conclusion

To make a div always full screen with CSS, we use flexbox.

Leave a Reply

Your email address will not be published.