css - 让 DIV 垂直填充页面的其余部分？

Question

我的 Google map 应用占据了大部分页面。但是，我需要为菜单栏保留最顶部的空间条。如何使 map div 自动填充其垂直空间？ height: 100% 不起作用，因为顶部栏会将 map 推过页面底部。

+--------------------------------+
|      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 属性，您将获得一个占据整个视口(viewport)的 div。

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

最后，将 #header 放在 #content 内并绝对定位(指定顶部、左侧、右侧和高度)。

我不确定这对浏览器有多友好。查看 this article at A List Apart获取更多信息。