我正在使用基于表格的布局（使用display: table属性）。容器具有动态高度（我在容器上设置了最小和最大高度属性）。容器内的所有内部元素的高度设置为100％。这个想法是他们将永远填补可用空间。
我遇到的问题是，display: table-cell的元素如果包含比它们高的内容，则会继续扩展到100％分配的空间之上。即使我设置了overflow: auto，也会发生这种情况。
我创建了一个jsfiddle来演示这个问题。请看这里：
在此示例中，容器的最大高度为300px，但名为.tall-content的内部元素的高度为400px。这使得容器长度高于其最大高度。
在Chrome中，这实际上是我想要的。但是它在Firefox或IE中不起作用。
请注意，由于容器高度是动态的，我无法在任何内部元素上设置固定高度（除非可以使用jQuery在文档加载时指定正确的高度并在窗口调整大小，但这需要尊重容器的最小和最大高度设置。
有谁知道我如何才能达到预期的效果？我想保留尽可能多的现有结构，但如果以稍微不同的方式实现相同的结果，那么我对此持开放态度。无论哪种方式，它都需要在所有浏览器中都能正常工作。
答案 0 :(得分：0)
这看起来是对display：table;
的限制您可以将“容器”放在另一个具有max-height的div中：300px; overflow：auto;
这里有一些信息可以解释您遇到困难的原因： http://www.w3.org/TR/CSS21/tables.html#height-layout