我有一个Google地图应用占据了大部分页面。但是，我需要为菜单栏保留最顶部的空间。如何使地图div自动填充其垂直空间？ height：100％不工作，因为顶部栏会将地图推过页面底部。
+--------------------------------+ | top bar (n units tall) | |================================| | ^ | | | | | div | | (100%-n units tall) | | | | | v | +--------------------------------+
解决方法
您可以使用绝对定位。
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来占据整个视口。
然后，您在#content上设置padding-top为> = #header的高度。
最后，将#header放在#content内，并绝对定位(指定顶部，左侧，右侧和高度)。
我不知道如何浏览器友好这是。查看this article at A List Apart了解更多信息。
