Home › CSS 100% body height

CSS 100% body height 

James
Joined:
02/21/2009
Posts:
130

September 06, 2010 03:09:35    Last update: January 11, 2011 21:24:36
With the following code, the body occupies the whole height (100%) of the browser window:
  • Code
  • Demo
<html>
<head>
<title>100% body height</title>
<style type="text/css">
body {
    margin: auto;
    margin-top: 4px;
    height: 100%;
    width: 75%;
    border: 1px #aaa solid;
}

h2 {
    margin: 5px;
    border: 1px #a66 solid;
    text-align: center;
}
</style>
</head>

<body>
    <h2>Site is down for maintenance</h2>
</body>
</html>


However, when you add <!doctype html> to the top of the file, the browser renders the page in Full Standards Mode instead of Quirks Mode:
  • Code
  • Demo
<!doctype html>
<html>
<head>
<title>100% body height</title>
<style type="text/css">
body {
    margin: auto;
    margin-top: 4px; /* override above for top margin to show border */
    height: 100%;
    width: 75%;
    border: 1px #aaa solid;
}

h2 {
    margin: 5px;
    border: 1px #a66 solid;
    text-align: center;
}
</style>
</head>

<body>
    <h2>Site is down for maintenance</h2>
</body>
</html>


In Full Standards Mode, the body no longer occupies the whole browser height. Why? Because body's parent is html and the browser does not know the height of html! Adding a height to html fixes the problem: 
html {
    height: 100%;
}
Share |
| Comment  | Tags
 

Related Notes