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

【问题标题】：Fill remaining height in such a way as height: 100% works inside以 height: 100% 的方式填充剩余高度
【发布时间】：2013-09-01 05:32:35
【问题描述】：

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

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

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

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

【问题讨论】：

标签： firefox google-chrome internet-explorer css

【解决方案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;
}

【讨论】：

只有在标题的高度已知/固定时才有效。理想情况下，标题的大小将适合其内容，而内容窗格将填充剩余空间。