int(1)
CSS
2 Lessons
css full heightcss full screencss height full screencss screen heightdiv full heightdiv full screenfull screen cssfull screen divheight full screen cssmake div full screen
CSS Make A Div Full ScreenCSS Center A Div Horizontally & Vertically
Next Previous

CSS Make A Div Full Screen

There are multiple ways we can make a div take up the whole 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 .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:
Web Design for Beginners: Real World Coding in HTML & CSS

height:100vh

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

When you set height to 100vh, the box element will stretch its height to the full height of the view port 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:
Build Responsive Real World Websites with HTML5 and CSS3

position:absolute

You can also use position absolute as well as setting all the viewport sides (top, right, bottom, left) to 0px will make the div takes 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
Complete Flexbox Course: Learn CSS3 Flexbox in 2020

Next Previous