0

我的html的结构是

<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>

我想要做的是给 divHeader 一个固定的高度，比如说 100px，让 divBody 精确地扩展到页面的末尾，没有浏览器的滚动条。

所以，如果用户的窗口是 1000px，body 就是 900px 等等......

如果我将 divBody 的高度设置为 100%，它将占据主体的 100%，这意味着将在页面中创建一个滚动条。

提前致谢，

4

3 回答 3

2

您可以使用绝对定位：FIDDLE：http: //jsfiddle.net/Z4vNN/2/

.divHead {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: red;
}

.divBody {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: green;
    overflow: auto;
}
于 2013-06-03T15:04:32.630 回答
1 
.divBody {
   height: calc(100% - 100px);
}
于 2013-06-03T15:03:59.330 回答
0

@crush 肯定是对的，但是如果绝对定位弄乱了其他页面元素，您可以通过将元素显示为块来避免它：http: //jsfiddle.net/kF5wQ/

#header {
    height:100px;
    width:100%;
    background:red;
    display:block;
}

#container {
    height:100%;
    width:100%;
    background:blue;
    display:block;
    overflow:visible;
}
于 2013-06-03T17:47:12.053 回答