css - 让一个 Div 占用所有可用的垂直空间？

Question

我正在尝试做一个看起来像这样的布局：

顶部和底部都有一个定义的高度，但是我希望中间的两个左/右部分占据所有可用的垂直空间。这是我到目前为止所得到的。

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

我将中间部分设置为精确的 500 像素作为展示，但正如你所看到的，我还弄乱了中间的右部分和右下部分。

Answer 1

你在谈论这样的事情：

全屏（源链接如下）

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, body, #wrapper, #middle, #middleleft, #middleright 被赋予'高度：100%'

接下来，#middleleft 被赋予 'float: left' 和 #middleright 'overflow; 隐';

请参阅： http: //www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/