让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/