CSS 100% height. Header, Dynamic Content Height & Footer Attached to Bottom

Difficulty Level

As much as I love CSS, there are a few things that are much harder now, than they used to be when we only used tables. Ã‚Â One of them is making a page have 100% height with a header at the top and a footer stuck to the bottom with the content in between expanding and contracting. Ã‚Â Here’s an easy way how to do it:

HTML

<html>
<header>
    <title>CSS 100% Height Example</title>
    <link rel="stylesheet" href="/style.css" 
         type="text/css"/>
</header>
<body>
<div id="container">
    <div id="header">
        Header
    </div>
    <div id="content">
        Content
    </div>
    <div id="footer">
        Footer
    </div>
</div>

CSS

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}
div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width: 750px;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}
div#header {
    padding:1em;
}
div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* Make the Footer Stick to the Bottom */
}