css - 垂直堆叠css中的div元素（具有动态高度）

Question

我现在正在尝试几个小时来完成以下工作：

我想在一个容器 div 中有三个 div。

1. 它们需要垂直堆叠（topDiv、middleDiv、bottomDiv）
2. topDiv 应该是 20px 高（固定）
3. middleDiv 应该占用剩余的空间（如表格中的 * 或 LaTeX 中的 \vfill）
4. bottomDiv 应该是 50px 高（固定）

那听起来不那么难吗？我就是想不通！

谢谢你的帮助。

Answer 1

像这样的东西可能对你有用：

http://jsfiddle.net/nCrEc/1/

编辑：

此版本随浏览器窗口缩放 http://jsfiddle.net/nCrEc/2/

html:

<div class="con">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

CSS：

.con{width:200px; top:0;bottom:0;left:0; position:absolute;background:#ff0;}

.top{width:200px;height:20px;position:absolute;top:0;left:0;background:#f60;}

.bottom{width:200px;height:50px;position:absolute;bottom:0;left:0;background:#f60;}
.middle{width:200px;min-height:1px; position:absolute;bottom:50px;top:20px;left:0;background:#06f;}

Answer 2

使用Flexbox很容易，但它仍在开发中，目前仅在 Chrome 中真正有效。

否则，您可以使用它* {box-sizing: border-box;}来让您的生活更轻松。如果支持旧浏览器对您很重要，甚至还有一个IE6-7 polyfill 。

这是一个例子。

*{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;}
html,body{width:100%; height:100%;}
div{width:100%; background:salmon;}
.middle {background:lightblue; height:100%; padding:100px 0;}
.top, .bottom {height:100px; position: absolute; left:0;}
.top {top:0; }
.bottom {bottom: 0;}

Answer 3

我在这个网站上做了一些非常相似的事情：

http://www.probusllandudno.org.uk/

单击 2012 年晚餐链接（如果使用 FF Web 开发人员，您可以使用查看生成的源代码）

要点是将 div 在文档中按顺序排列，分配固定宽度（在我的情况下）或宽度 = 100%，顶部和底部 div 具有固定高度，请参阅 css

附录

另一个响应提供了一个复杂的解决方案，涵盖了最具体的填充问题。您尚未指定您的内容如何影响解决方案。我的网页只是居中的文本