使用overflow-y属性使DIV高度占满整个页面

Question

我有几个DIV元素，它们一个接一个地排列。

<div id="app">
    <div id="title">Title</div>
    <div id="block1">Block 1</div>
    <div id="block2">Block 2</div>
    <div id="content">CONTENT</div>
</div>

#title、#block1 和 #block2 的高度已经固定，我希望内容能够占据剩余的所有空间，并且也具有 overflow-y: auto 属性，即当内容超出容器高度时会出现滚动条。

我该如何实现呢？ 我曾经尝试过将内容绝对定位，并将其底部设置为 0 像素，顶部设置为其他 DIV 高度的总和。但是，我可能会在内容块上方添加更多的 DIV 元素，并且不想一直更改其 CSS。

我还设置了：

html, body, #app {
    height: 100%
}

但是，当我将#content的高度设置为100％时，它会超出屏幕底部，这不是我想要的。我希望#app的高度是100％，而#content只需适应其中，并在需要时显示滚动条。

这里是jsFiddle - http://jsfiddle.net/ZNFcd/ 有什么帮助吗？由于这是内部应用程序，因此只能在Chrome中使用的CSS3解决方案也受到欢迎。

谢谢。

- Boffin

---

对于初学者，您需要在html, body声明中设置margin:0和padding:0。您还需要使用box-sizing:border-box;。 - Cody Guldner

这个 fiddle 更接近你想要的 http://jsfiddle.net/ZNFcd/1/ - Cody Guldner

Answer 1

基于 @apaul34208 的 CSS 解决方案，您可以使用

html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}
#app {
    border: 1px solid green;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
#title {
    height: 20px;
}
#block1 {
    height: 30px;
}
#block2 {
    height: 40px;
}
#content {
    position: absolute;
    top: 90px;
    bottom: 0;
    width: 100%;
    border: 1px solid red;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

这样你就不需要使用calc()了，因为它在旧浏览器上无法工作。

演示

- Oriol

Answer 2

jQuery选项

工作示例

var contentHeight = function () {
    var w = $(window).height();
    x = $('#title').height();
    y = $('#block1').height();
    z = $('#block2').height();
    h = w - x - y - z - 3; // -3 to account for borders
    $('#content').height(h);
};

$(document).ready(contentHeight);
$(window).resize(contentHeight);

.height()的API文档

使用一个小脚本有更多的灵活性。尝试添加或删除内容，或者更改其他div的高度。

纯CSS选项

示例2

#app {
    border: 1px solid green;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box
}
#title {
    height: 20px;
}
#block1 {
    height: 30px;
}
#block2 {
    height: 40px;
}
#content {
    height: 90%; /* fallback for browsers without support for calc() */
    height: calc(100% - 90px);
    border: 1px solid red;
    box-sizing:border-box;
    -moz-box-sizing:border-box
}

calc()函数文档
box-sizing属性文档

个人建议使用jQuery选项，calc()虽然很酷，但在Opera中不受支持，在Safari中也存在“bug”问题。

- apaul