垂直堆叠div中的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;}