Question

我正在努力工作几个小时才能完成以下工作：

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

它们需要垂直堆叠（topDiv，middleDiv，bottomDiv）
topDiv应该是20px高（固定）
middleDiv应该剩余剩余的空间（如表中的*或LaTeX中的\ vfill）
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。

这是example。

*{-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，指定固定宽度（在我的情况下）或width = 100％，top和botom divs有固定高度请参阅css

附录

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

垂直堆叠div中的div元素（动态高度）

3 个答案: