css - 相对于窗口的动态 div 高度

Question

我的html的结构是

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

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

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

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

提前致谢，

score 2 · Accepted Answer

您可以使用绝对定位：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;
}

score 1 · Accepted Answer

1

.divBody {
   height: calc(100% - 100px);
}

于 2013-06-03T15:03:59.330 回答

score 0 · Accepted Answer

@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;
}

css - 相对于窗口的动态 div 高度

3 回答 3

Related

Reference