Advertisements
How to set the height of a div to 100% using CSS
Topic: HTML / CSSPrev|Next
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.
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to create two DIV elements with same height side by side in CSS
- how to make a DIV not larger than its contents CSS
- How to align text vertically center in a DIV element using CSS
Advertisements
