Question

我正在尝试填充屏幕的长度，但是我的100％高度的内容区域忽略了标题，这使得该区域太长。其他SO解决方案不会完全奏效。

我需要能够调整增长的内容（页面上的滚动条而不是#mainView），当没有足够的内容填充页面时，＃mainView应该填满屏幕（没有滚动））。

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/

Answer 2

您应该使用大小调整：
见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 3

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

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

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

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

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>

内容区域高度100％考虑到标题

4 个答案: