How to set the height of a div to 100% using CSS?
The CSS height property is used to set the height of elements in the webpage. The height property accepts only the positive value. The height of the div element can be set to 100% using multiple ways. Here, we will learn the ways to set the div height to 100%.
Using CSS height property
To set the height of the div element to 100% use height:100% the div element. It will set the height of the div element to 100% relative to the containing block.
For example, if there are two div (inner and outer div). The height of the outer div is 300px, then the inner div with a height: 100% will have also have a height of 300px.
Example: Set the height of div element to 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<style>
.outer{
height: 300px;
}
.inner {
width: 300px;
border: 3px solid blue;
height: 100%;
}
</style>
<body>
<div class="outer">
<div class="inner">Inner div with height 100% </div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Using viewport-height
The viewport-height is relative to the initial size of containing block. When the height of the initial block changes, it scales up relatively. The vh is used for viewport-height. Use 100vh to set the height of div to the height of the browser window.
Example: Set the height of div to the height of the browser
Here in the example, the div height is set to the maximum height of the browser.
Conclusion
We can set the div height to 100% using CSS. The height can be set relative to the parent containing block or relative to the viewport size. Both the ways are explained with examples.
