CSS 100％高度布局。流体页眉，页脚和内容。在IE10和Firefox中

Question

这适用于Chrome：http://jsfiddle.net/EtNgv/我想让它在IE和Firefox中运行。

其他类似问题的答案说这是不可能的 - 但没有提到它可能在Chrome中 - 所以我希望有人可以调整我在这里使它在FireFox和IE10中工作。

期望的结果：

容器div占用100％的高度 - 但不多。 哪个包装页眉和页脚div的高度由其内容决定。 页脚div始终与页面底部齐平。 在页眉和页脚之间延伸的中间div。如果其内容溢出，则应滚动。

图片：http://i.stack.imgur.com/e7ddc.png

当前实施：

CSS：

html,
body {
   height:100%;
   margin:0;
}
#container {
   display:table;
   height:100%;
   width:100%;
}
#header,
#footer {
   display:table-row;
   background-color:#FC0;
   height:2px;
}
#middle {
   display:table-row;
   overflow:hidden;
   position:relative;
}
#content {
   height:100%;
   overflow-y:scroll;
}

HTML：

<div id="container">
    <div id="header">header<br/>header line 2<br/></div>
    <div id="middle">
        <div id="content">Burrow under covers...</div>
    </div>
    <div id="footer">footer</div>
</div>

这适用于Chrome，但在IE和Firefox中，如果内容大于中间div，则容器大于100％，页面会获得滚动条。

Answer 1

嗯，我接近了，但它仍然感觉有点草率。我无法想象在不使用jQuery来确定屏幕高度，＃footer，＃header等等的情况下创建这样的页面......

Forked Fiddle:

http://jsfiddle.net/mRDux/