使一个div占用所有可用的垂直空间？ [英] Make a Div take up all Available Vertical Space?

问题描述

我试图做一个如下的布局：

I'm trying to do a layout that looks like this:

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

Both the top and bottom parts have a defined height, however I want the two left/right sections in the middle to take up all available vertical space. Here's what I got so far.

http：/ /jsfiddle.net/xTh5f/2/

我把中间部分的确定为500px，就像展示一样，但正如你所看到的，我也搞砸了

I made the middle sections an exact 500px just as a showcase, but as you can see, I also messed up the middle right section, and the bottom right section.

推荐答案

您正在谈论这样的内容：

Are you talking about something like this:

全屏（来源如下） p>

Fullscreen (source linked below)

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/

这篇关于使一个div占用所有可用的垂直空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！