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

Topic: HTML / CSS« Prev|Next »

Answer: Set the style rule "height:100%;" for parents too

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

The container div has two parent elements: <body> and <html> (according to the example source code). We all know the default value of height property is "auto", so if we also set the height of <body> and <html> element to 100% the resulting height of 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>
 
Close

Your Feedback:

 

We will be happy if you say something.