使DIV垂直填充页面的剩余部分？

Question

我有一个谷歌地图应用占据了大部分页面.但是,我需要为菜单栏保留最顶部的空间.如何使地图div自动填充其垂直空间？ height: 100%不起作用,因为顶部栏会将地图推到页面底部.

+--------------------------------+
|      top bar  (n units tall)   |
|================================|
|              ^                 |
|              |                 |
|             div                |
|     (100%-n units tall)        |
|              |                 |
|              v                 |
+--------------------------------+

Answer 1

你可以使用绝对定位.

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    This is where the content starts.
</div>

CSS

BODY
{
    margin: 0;
    padding: 0;
}
#content
{
    border: 3px solid #971111;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 85px;
}
#header
{
    border: 2px solid #279895;
    background-color: #FFF;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

通过#content绝对定位并指定top,right,bottom和left属性,可以获得占用整个视口的div.

然后,设置padding-top上#content为> =的高度#header.

最后,放在#header里面#content并绝对定位(指定顶部,左侧,右侧和高度).

我不确定这对浏览器有多友好.看看这篇文章的列表除了了解更多信息.

Answer 2

显然,这样做的方法是使用JavaScript来监视onload和onresize事件,并以编程方式调整填充div的大小,如下所示:

使用jQuery:

function resize() {
    $("#bottom").height($(document).height() - $('#top').height());
}

使用纯JavaScript:

function resize() {
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}

编辑:然后将这些绑定到window对象.

Answer 3

另一个没有给出的解决方案是使用CSS3而不是javascript.现在有一个calc()函数可以用来做同样的事情:

HTML

<div id="content">
    <div id="header">
        Header
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

CSS3

#content {
    height: 300px;
    border-style: solid;
    border-color: blue;
    box-sizing: border-box;
}
#header {
    background-color: red;
    height: 30px;
}
#bottom {
    height: calc(100% - 30px);
    background-color: green;
}

这是jsfiddle

您可能还希望使用box-sizing: border-box内部div 的样式,因为这可以摆脱填充和父div之外的边界问题.