我有一个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了解更多信息。
