讓Div取得所有可用的垂直空間？

Question

我試圖做一個佈局，看起來像這樣：

無論是頂部和底部有一個定義的高度，但是我想在中間的兩個左/右段爲佔用所有可用的垂直空間。這是我到目前爲止。

http://jsfiddle.net/xTh5f/2/

我做中間部分的確切500px的只是作爲一個展示，但你可以看到，我也搞砸了中間偏右的部分，右下部分。

Answer 1

你說的是這樣的：

Fullscreen（源鏈接如下）

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0;; 
    color: white; 
} 
#wrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#wrapper > div { 
    display: table-row; 
} 
#wrapper > div > div { 
    display: table-cell; 
} 
#top, 
#bottom { 
    height: 50px; 
} 
#wrapper > div > #topleft, 
#wrapper > div > #middleleft, 
#wrapper > div > #bottomleft { 
    width: 300px; 
} 
#wrapper > div > #middleleft { 
    background: #23A9E0; 
} 
#wrapper > div > #middleright { 
    background: #39E023; 
} 
#wrapper > div > #topright, 
#wrapper > div > #bottomright { 
    background: #208D11; 
} 
#wrapper > div > #topleft, 
#wrapper > div > #bottomleft { 
    background: #092A7C; 
} 

http://jsfiddle.net/xTh5f/4/

Answer 2

在這裏你去：http://jsfiddle.net/xTh5f/3/

我的變化：

HTML，身體，#wrapper指定，#middle，#middleleft，#middleright給出 '高度：100％'

接下來，＃ middleleft被賦予'float：left'和#middleright'溢出;隱';

請參閱：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/