HTML & CSS Tutorials

CSS Make A Div Full Screen

Last modified on June 13th, 2022
HTML & CSS

There are multiple ways to use CSS properties, we can make a div full screen horizontally and vertically.

I have a simple div element with a class name box.

<div class="box">
</div>

Then, clear any default margin or padding from the HTML and body tags.

html, body {
  margin:0px;
}

height:100%

Before setting the height property to 100% inside the .box class, make sure to add it to both HTML and body tags as well, otherwise, it won’t work.

This is because, when you set the height to 100% to an element, it will try to stretch to its parent element height.

html, body {
  margin:0px;
  height:100%;
}

.box {
  background:red;
  height:100%;
}

✅ Recommended:
CSS Make Background Image Full Screen

height:100vh

The .box class has only 100vh which is 100% of the viewport height.

When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.

I do not have to add one for horizontal as div is a block-level element that will take the full width horizontally by default.

.box {
  background:red;
  height:100vh;
}

Recommended:
CSS Center A Div Horizontally & Vertically

position:absolute

You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.

.box {
  background:red;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

You can also set height and width to 100% instead of setting 0 to top, right, bottom and left.

One of the scenarios I can think of using the position: absolute property to make a div full screen is when you want to have a background div full screen to the browser and some other div in the foreground.

Recommended