Make DIV 100% with overflow-y

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有固定的高度，我希望内容将占用100%的自由空间，也将有overflow-y: auto，即当其内容不适合时将有滚动条。

我该怎么做?我读过关于让内容绝对定位的想法，并将其底部设置为0px，顶部设置为其他div的高度汇总。但是，我可以在内容块上添加更多DIV元素，并且不想一直更改其CSS。

我还设置了:

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

但是当我将#content设置为100%高度时，它会超过屏幕的底部，这不是我需要的。我希望#app的高度是100%，#content正好适合它，如果需要的话显示滚动条。

这里是jsFiddle - http://jsfiddle.net/ZNFcd/

帮忙吗?由于它的内部网应用程序，所以只能在chrome + CSS3解决方案中工作的解决方案也受到欢迎。

谢谢。

Answer 1

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中不支持，而且有"bug";在Safari。

Answer 2

基于@ apapul34208的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()了，它在旧的浏览器上不起作用。