In this post, we will learn how to set a div full height of the browser window. If we want a div with full height of the browser window. Then we use height CSS property and set its value to 100%. But we see it doesn't work. So how can we make a div full height, we will learn in this post.


How To Set A DIV Full Height Of The Browser Window ?


Set A DIV Full Height Of The Browser Window

To set a div full height of the browser window we use height: 100% CSS property. But it doesn't work because percentage (%) is a relative unit to its parent. In this example below, the parents of the div are html and body. If we set html and body height to 100% then its work and now the height of the div is equal to the browser window. For better understanding follow this example.


<!DOCTYPE html>
<html>
<head>
<title>How To Set A DIV Full Height Of The Browser Window ?</title>
<style>

html, body {
height: 100%;
margin: 0px;
padding: 0px;
}

div {
height: 100%;
background: #f1f1f1;
}

</style>
</head>
<body>

<div>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</div>

</body>
</html> code-box



Summary

In this post we learned how to set a div full height of the browser window. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post