使用CSS将div从另一个div填充所有页面的高度

Question

我正在尝试使用普通div #header 和可滚动 div #content 创建页面，所以我的 #content < / em>填充 #header 的所有高度，即使 #header 改变了自己的身高。

我尝试了几个选项，这是我的最后一个http://jsfiddle.net/C4wEg/。但是这个选项的缺陷是，如果 #header 的高度发生变化，我需要更改 #content 的 top 属性（利用JavaScript）。

有没有解决办法只能用css实现我的目标？

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    position: relative;
}
#header {
    background-color: tan;
}
#content {
    overflow: auto;
    background-color: teal;
    position: absolute;
    bottom: 0;
    top: 20px;
}

<div id="header">
    Test header
</div>

<div id="content">
    Test content
</div>

Answer 1

由于css忽略了绝对/固定对象的维度（就其邻居而言，这些对象是非流动的），您可以使用媒体查询来模拟动态高度行为：

@media only screen and ( max-width: 700px ) {
    #header {
        height: 40px;
    }
    #content {
        padding-top: 40px;
    }
}

http://jsfiddle.net/2RTFW/（调整显示区域的宽度以查看效果）。

如果您正在使用SASS，那么您可以轻松生成此类媒体查询，即使是10px增量，如果您愿意（使用“for”循环）。