垂直在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年的Dinners鏈接（如果使用FF Web開發人員，則可以使用查看生成的源代碼）

要點是在文檔中將div排序，分配固定寬度（在我的情況下）或width = 100％，頂部和底部div具有固定高度，請參見css

附錄

另一個答復提供了一個復雜的解決方案，涵蓋了最具體的填充問題。.您尚未指定內容可能如何影響解決方案。 我的網頁只是居中文字