让Div占用所有可用的垂直空间？

Question

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

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

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

我把中间部分做成了一个精确的500px就像展示一样,但正如你所看到的,我也搞砸了右中间部分和右下部分.

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/