firefox - 以 height: 100% 的方式填充剩余高度

Question

考虑这个jsfiddle：http: //jsfiddle.net/SD4nM/4/

在 Firefox 和 Chrome 中没有滚动条；最里面的div填充剩余的高度，占页眉和页脚。在 IE 中，最内层div与 body 高度相同，导致滚动条。

是否有跨浏览器的方式来生成这样的布局？

要求：最里面的div不能有display设置，头部不能有固定的高度。

Answer 1

您可以同时使用定义顶部、左侧、底部和右侧等技术。

jsFiddle 演示

主要CSS：

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: yellow;
}

.content {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 45px;
    right: 0;
    background: red;
}