firefox - 以: 100% works inside这样的方式填充剩余高度

Question

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

在 Firefox 和 Chrome 中没有滚动条；最里面的 div 填充剩余的高度，占页眉和页脚。在IE中，最里面的div与body等高，造成滚动条。

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

要求:最里面的div不能设置display，header不能固定高度。

Answer 1

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

jsFiddle Demo

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