css - 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: 200pxand 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%;}

实际上，您设置position:absolute并#footer给出了top700px 的值；#header和#content等的总高度bottom:0将填充空白空间。

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

Answer 2

as far as i know css3 can do "Maths" adn simple functions see w3c-specifications , search for "calc" ;)