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 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.

html, body {
margin:0px;
height:100%;
}
.box {
background:red;
height:100%;
}

height:100vh

The .box class has only the 100vh which is 100% of the viewport 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;
}

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;
}

Instructor/Owner of SoftAuthor! http://softauthor.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store