Creating my DIV Stretch to fill the available page space using valid CSS in IE

Question

I am trying to make a simple DIV layout compatible with IE and this gives me hell.

Here is the main layout I'm working on:

<div id="body" style="background: blue;">
<div id="header">
 HEADER
</div>
<div id="content" style="height: 88%;">
 CONTENT HERE
</div>
<div id="footer">
 FOOTER
</div>
</div>

I use CSS rounded corners on the div of the body, and I have information about the navigator and footer in #footer, as well as the mainbar tab on the tab in #header.

My main problem was to stretch the #contentdiv vertically to fit the full page when I only have a small amount of content WITHOUT creating vertical scrollbars.

If I do #content height: 100%;, the header and footer cause the page to exceed 100% and trigger scrollbars.

#content 88% FireFox, :

a) ) IE ().

- , ? , -.

Answer 1

, , , , .

HTML:

<div id="wrapper">
    <div id="header">
    <div id="header_900">
    <p>header</p>
    </div><!--header_900-->
</div>      
<div id="content">
    <div id="content_900">
        <p>content</p>
    </div>  </div>      

</div><!--wrapper-->


<div id="footer">
<div id="footer_900">
    <p>footer</p>   
</div>    </div>

CSS

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}



/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

Answer 2

, , quirks. quirks (no doctype), :

html, body {
    margin: 0;
    padding: 0;
    height: 100%:
}

#content {
    height: 100%:
}

, - : http://www.alistapart.com/comments/fauxcolumns