PUBLISHED ON: AUGUST 11, 2021
How to set a div with full height in CSS?
Sometimes we need to add an element in the webpage that should cover the whole height of the screen or the height of the parent container. For this purpose, we can do so using the CSS property. Let's see the examples.
Creating a div element of full height
To create a full-height div element, use height: 100%. In addition to that also set the height of the body to 100%. Another way to set full height is using vh(viewport height) unit. 1vh is equal to 1% of the viewport height. Add height: 100vh to set a div with full height.
Example: Creating a full-height div container
In this example, we have used height: 100% to create a full-height div container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
html,body {
height: 100%;
margin: 0;
}
.container {
height: 100%;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="container">
<h2> Full height container </h2>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a full-height div with vh unit
Here, we have used height: 100vh to create a full-height div.
Conclusion
In this tutorial, we have learned to set a div of full height. To do so use CSS height: 100% or height: 100vh. We have explained both properties with examples.
