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

对您的 mainView 的 CSS 进行一些小改动...

制作它absolute，设置top、left、bottom和right属性。然后只需删除旧高度并更改溢出以在需要时添加滚动条。

#mainView {
    background:red;
    position:absolute;
    top:80px;
    bottom:0;
    right:0;
    left:0;
    overflow:auto;
}

还有一个 jFiddle 示例：http: //jsfiddle.net/SsF8S/2/

Answer 2

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

#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/

Answer 3

你应该使用box-sizing：
见http://jsfiddle.net/SsF8S/4/

CSS

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: black;
    z-index: 1;
}
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 80px 0 0 0;
    background: red;
    z-index: 0;
    overflow: hidden;
}
#mainView {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

html

<div id="header">
    --Header
</div>
<div id="wrapper">
    <div id="mainView">

    </div>
</div>

Answer 4

你可以有一个主容器。

<style type="text/css">

html,body{height:100%;margin:0px;}
#header{height:80px;background:black;}
#container{height:100%; background:red;}

</style>

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