CSS：在具有固定高度或宽度的情况下填充空白位置答案

【问题标题】：CSS: Filling blank place under the condition of having fixed heights or widthsCSS：在具有固定高度或宽度的情况下填充空白位置
【发布时间】：2011-02-17 11:01:41
【问题描述】：

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

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

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

有什么解决办法吗？

感谢您的帮助。

【问题讨论】：

请发布您的 CSS :)

标签： css height width fixed

【解决方案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，并为top 提供700px 的值； #header 和 #content 和 bottom:0 的总高度将填充空白空间。

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

【讨论】：

非常感谢！但是您的第一行导致了垂直滚动条。所以我把它删除了。

【解决方案2】：

据我所知，css3 可以做“数学”和简单的功能见w3c-specifications，搜索“calc”；）

【讨论】：