CSS - 内容区域填充窗口

Question

<div id="content">

</div>

#content{
height:100%;
z-index:2;
position:relative;
top:40px
}

此 DIV 位于距页面顶部 40 像素的位置，并在其上方 40 像素高的导航下方滚动。

如何让#content 填充窗口的其余部分，而不是像使用 height:100% 时那样进一步扩展 40px？

请注意，当其中存在足够的内容时，内容 div 必须能够扩展到超出窗口高度。

Answer 1

如果您可以使用calc，而只想使用css，请执行以下操作:

#content {
    min-height: calc(100% - 40px);
}

检查 http://caniuse.com/#feat=calc查看您的目标浏览器是否支持它。