使DIV垂直填充页面的其余部分?
我有一个Google Maps应用程序占据了大部分页面。但是,我需要为菜单栏保留最上方的空间。如何使地图div自动填充其垂直空间? height:
100%不起作用,因为顶部栏随后会将地图推到页面底部。
+--------------------------------+| top bar (n units tall) |
|================================|
| ^ |
| | |
| div |
| (100%-n units tall) |
| | |
| v |
+--------------------------------+
回答:
您可以使用绝对定位。
<div id="content"> <div id="header">
Header
</div>
This is where the content starts.
</div>
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
并进行绝对定位(指定顶部,左侧,右侧和高度)。
以上是 使DIV垂直填充页面的其余部分? 的全部内容, 来源链接: utcz.com/qa/401727.html