Making my DIV stretch to fill the available page space with valid CSS in IE

Question

Hey guys,

I'm trying to make a simple DIV layout compatible with IE, and it's giving me hell.

Here's the basic layout I'm working for:

<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'm using CSS rounded corners on the Body div, and I have a navbar and footer info in #footer as well as a tabbed main navbar in #header.

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

If I make #content height: 100%; the header and footer cause the page's height to go above 100% and triggers scrollbars.

Making #content's height 88% does the trick in FireFox, but there are two problems with this solution:

a) It's an ugly hack b) It doesn't work in IE (of course).

Anyone have ideas on how to accomplish this? I assume is should be a fairly common situation for web designers out there.

Answer 1

I don't think there is an official way to accomplish this unless you use quirks mode. If you use quirks mode (no doctype), it would look something like this:

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

#content {
    height: 100%:
}

Maybe what you're looking for is an adapted version of something like this: http://www.alistapart.com/comments/fauxcolumns

Answer 2

There you go, try this template, it's really simple and i think it would solve your problem.

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;
}