CSS:在固定高度或宽度的情况下填充空白处

Question

该解决方案不需要所有浏览器都支持。

<div id="page">
  <div id="header">&nbsp;</div>
  <div id="content">&nbsp;</div>
  <div id="footer">&nbsp;</div>
</div>

让我们看看。页面得到 width:100%;height:100%。 header 和 content 都有 width:100%(这是必需的吗？)，但它们有固定的高度，比如说 height: 200px 和 height: 500px。现在我希望页脚填充页面的其余部分。

有什么解决办法吗？

感谢您的帮助。

Answer 1

你可以使用这样的东西:

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

事实上你为#footer设置了position:absolute并且给top赋值700px； #header 和 #content 以及 bottom:0 的总高度将填充空白区域。

演示:http://jsbin.com/icuza3/2