使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

回到顶部