Html 在IE中使用有效的CSS扩展我的DIV以填充可用的页面空间

我正试图使一个简单的DIV布局与IE兼容，这让我很痛苦

以下是我工作的基本布局：

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

标题
满足于此
页脚

我在Body div上使用CSS圆角，在

#footer

中有一个导航栏和页脚信息，在

#header

中有一个选项卡式主导航栏

我的主要问题是使

#content

div垂直拉伸以适应整个页面，而我只有少量内容，没有创建垂直滚动条

如果我做

#content

高度：100%页眉和页脚导致页面高度超过100%，并触发滚动条

在FireFox中，将
#content
的高度设置为88%可以实现这一点，但此解决方案存在两个问题：

a） 这是一个丑陋的黑客
b） 它在IE中不起作用（当然）

有人对如何做到这一点有想法吗？我认为这对于网页设计师来说应该是一种相当普遍的情况。
我不认为有正式的方法来实现这一点，除非你使用怪癖模式。如果您使用quirks模式（无doctype），它将如下所示：

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

#content {
    height: 100%:
}

也许你要找的是这样一个经过改编的版本：
好了，试试这个模板，它非常简单，我想它会解决你的问题

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>

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