垂直CSS（在動態高度）堆棧div元素

Question

我想幾個小時現在得到以下工作：

我想在容器div有三個div。

1. 他們需要垂直堆疊（topDiv，middleDiv，bottomDiv）
2. 的topDiv應該是20像素高（固定）
3. 的middleDiv應採取的剩餘空間的剩餘部分（如*表或\ LaTeX中vfill）
4. 的bottomDiv應該是50像素高（固定）

這聽起來並不那麼難不是嗎？我只是無法弄清楚！

感謝您的幫助。

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

我做這個網站非常相似的東西：

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

點擊晚宴2012鏈接（如果使用FF web開發人員，u可以使用視圖生成的源）

要點是在文檔中按順序放置div，指定固定寬度（在我的情況下）或寬度= 100％，top和botom div具有固定的高度，請參閱css

附錄

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

Answer 3

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;}