How to set the height of a div to 100% using CSS

Css programming,

All Answers

mhmadesk

2022-05-17

need an explanation for this answer? contact us directly to get an explanation for this answer

Set the 100% height for parents too

If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.

For instance, if you consider the following example, the .container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto, so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
    html, body {
    	height: 100%;
		margin: 0px;
	}
	.container {
		height: 100%;
		background: #f0e68c;
	}
</style>
</head>
<body>
    <div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

How to set the height of a div to 100% using CSS

All Answers

Set the 100% height for parents too

HTML / CSS Frequently Asked Questions

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now