CSS - 内容区域填充窗口

Question

<div id="content">

</div>

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

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

如何让#content填充窗口的其余部分，而不是像使用高度时那样延伸40px：100％？

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

Answer 1

如果您可以使用calc，并且只想使用css，请执行以下操作：

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

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

Answer 2

这里有两个选项。

• 使用calc() _{compatibility} 的人：

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

• 两人使用box-sizing _{compatibility} 和padding代替top

   #content {
       padding-top:40px;
       min-height:100%;
   }
  

Answer 3

你需要javascript来计算你需要的正确高度，你可以使用这样的jquery来改变你的身高：

$("#content").css('height','CALCULATED_VALUE');

您只需要找出每行使用的像素数，然后乘以您必须显示的行。