垂直堆叠div的CSS布局使用100％的可用高度

Question

我有一个布局，其中两个div在父div中垂直堆叠，这将是一个特定的高度（由于包含一个左手菜单）。我希望这两个div占用所有可用的垂直空间。但是，他们必须根据其内容调整大小。最简单的解释方法是使用图表：

从上到下阅读图表，这就是场景：

1. 两个div占用可用高度的50％，因为这足以包含其内容（这是默认值）。

2. 顶部div中有很多内容，底部div中的内容较少。顶部div扩展到适合内容并挤压底部div。

3. （2）的反向情况。

4. 两个div都必须扩展以适应其内容。包含div必须扩展到accomadate。

我想我可以弄清楚如何使用表格来查看example here哪个几乎正确（无论如何都是chrome），除了外部div没有正确展开。

如果不使用表格，是否有更好的CSS解决方案？

我无法使用JavaScript，解决方案必须适用于所有浏览器...包括IE6 :(

Answer 1

这可以使用CSS完成，其功能称为灵活的盒子模型。它是自开始以来在CSS中使用的盒子模型的扩展，允许你做垂直堆叠等事情，这在以前是不可能的。

您将从display: flexbox;开始，然后使用其他相关样式来定义所需布局的特征。它非常强大。您可以在此处阅读完整的W3C规范：http://www.w3.org/TR/css3-flexbox/

现在是坏消息：这是CSS的最新成员。它实际上有相当不错的浏览器支持（虽然有供应商前缀），但你总是会遇到的问题是它不支持IE，甚至IE9都不支持（虽然它是为IE10计划的）

其他浏览器需要供应商前缀，因此即使是支持的浏览器，您也需要以四个或五个版本编写样式。

此外 - 这是真正的杀手 - 对于不支持它的浏览器，没有一个好的后备解决方案。如果您使用flexbox布局设计页面，并将其加载到不支持它们的浏览器中，那将是一场灾难。

出于这个原因，它还没有真正在现实世界中使用过多。现在是时候了，但只要IE9及更早版本正在使用，它就不会成为主流。

您可以在此处查看该功能的完整浏览器兼容性图表：http://caniuse.com/#search=Flexible%20Box%20Layout%20Module

与此同时，你将不得不使用Javascript解决方案。

我的推荐是JQuery Masonry插件。我认为这将是你现在最好的解决方案。

Answer 2

您可以使用100％高度包装div和白色边框来伪造它：

http://jsfiddle.net/cBV88/2/

你也可以移除固定的高度，它仍然有效。

Answer 3

SuperStretch可能会让你成为那里的一部分。