html - 内容区域高度 100%，考虑到标题

Question

我试图填满屏幕的长度，但我的 100% 高度的内容区域忽略了标题，这使得该区域太长。其他 SO 解决方案不会完全起作用。

我需要能够针对不断增长的内容进行调整(页面上的滚动条不是#mainView)，当没有足够的内容填满页面时，#mainView 应该填满屏幕(没有滚动) ).

http://jsfiddle.net/SsF8S/6/

CSS:

html, body { height: 100%; margin: 0px; }
#container{margin:20px;height:100%}
#header { height: 80px; background: pink; }
#mainView { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; }

HTML:

<div id="container">
   <div id="header">
     --Header
   </div>
   <div id="mainView">
     --Main
   </div>
</div>

Answer 1

让标题覆盖主视图，并填充主视图的顶部以避免它:

#header {
  height:80px;
  background:black;
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
}

#mainView { 
  height:100%; 
  background:red;
  padding-top: 80px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

使用此解决方案更新了 jsFiddle:http://jsfiddle.net/upQpj/