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. This will make the div take the full screen.

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