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 Option

<强> Working Example

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);

API documentation for .height()

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

纯CSS选项

<强> Working Example 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
}

Documentation for calc()
Documentation for box-sizing

我会亲自使用jQuery选项，calc()很酷，但它在Opera中不受支持，并且在Safari中是“buggy”。

Answer 2

基于@ 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()，这在旧浏览器上无效。

Demo

使溢出-Y使DIV 100％

2 个答案: