WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
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.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Set DIV Height to 100% Using CSS</title>
  • <style type="text/css">
  •     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:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.