css-only 100% div 高度和动态高度页脚答案

【问题标题】：css-only 100% div height with dynamic height footercss-only 100% div 高度和动态高度页脚
【发布时间】：2013-03-16 21:41:51
【问题描述】：

我有一个由三部分组成的布局：页眉、内容和页脚。我非常熟悉绝对定位技术；当我希望内容 div 扩展到可用高度的 100% 时，我经常使用它。

在这种情况下，我的问题是我事先不知道页脚的高度，它是根据自己的内容动态的，它有未知的行数（通常在 1 到 3 行之间）。我希望主要内容 div 在考虑页眉的高度（这是固定的，所以很容易）和页脚的高度之后，抓住 100% 的可用高度，因此我不能使用绝对定位技术在这里。

我有一个涉及 javascript 的解决方案，但我正在尝试找到一个仅 css 的解决方案。理想情况下，它应该是一个跨浏览器的解决方案（IE8、IE9、chrome、firefox 和 Safari）。

【问题讨论】：

介意发布一个 jsFiddle 吗？
发布什么？我没有要演示的工作布局，也不是我有一个错误的布局，我不明白它为什么会失败
就是说，你试过什么？如果你尝试过但失败了 - volia，你有你的错误布局:)

标签： css

【解决方案1】：

试试这个

<!doctype html>
<html>
<body>
<style>
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;

}
#footer {
   position:absolute;
   bottom:0;
   width:100%;

   background:#6cf;
}
</style>
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
</body>
</html>

【讨论】：

它不起作用，因为页脚是绝对定位的。它是从正常流动中取出的，并且不限制身体所占据的空间。此外，身体没有拉伸到 100% 高度