如何让一个Div占据所有可用的垂直空间？

Question

我想做一个布局，看起来像这样： 顶部和底部都有定义的高度，但我希望中间的左/右两个部分占用所有可用的垂直空间。以下是我目前得到的内容。

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

我将中间部分设为了精确的500像素，只是作为一个展示，但正如你所看到的，我也搞砸了中右和下右的部分。

- pufAmuf

---

我忘了说，谢谢您查看我的问题 :)！ - pufAmuf

我的一点知识总结自给定文章：所有父元素的高度应该是100％，子元素的高度也应该是100％，因为默认情况下任何元素的高度都是“自动”的。 http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm - owais

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/

- Jared Farrish

---

没问题。请记住，在IE8/7中，高度会崩溃，因为它实际上不支持在html和body上使用height: 100％（我认为）。您可能需要使用IE条件语句来“修复”它。 - Jared Farrish

Answer 2

这是您需要的内容：http://jsfiddle.net/xTh5f/3/

我的更改如下：

给html、body、#wrapper、#middle、#middleleft、#middleright设置'height: 100%'

接下来，#middleleft设置'float: left'，#middleright设置'overflow; hidden';

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

- carpenumidium

---

谢谢jklm313！我想问一下，我注意到中间部分的背景只下降到文本的高度，右下角部分根本没有背景颜色。这只能通过JavaScript实现吗？ - pufAmuf

你的标记中有一个错别字：id="botomright"，你漏掉了一个't'。更新链接：http://jsfiddle.net/xTh5f/8/ ;) - carpenumidium