CSS Make A Div Height Full Screen [THREE SIMPLE WAYS]
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