html填充页面剩余,css – 使DIV垂直填充剩余的页面？

您可以使用绝对定位。

HTML

Header

This is where the content starts.

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内，并绝对定位(指定顶部，左侧，右侧和高度)。