Question

我的html结构是

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

我想要做的是给divHeader一个固定的高度，比方说100px，然后让divBody完全扩展到页面的末尾，而不需要浏览器的滚动条。

所以，如果用户的窗口是1000px，那么正文将是900px等......

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

提前致谢，

Answer 1

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

Answer 2

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

Answer 3

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

动态div高度相对于窗口

3 个答案: