CSS布局中的“任何剩余内容”

Question

我在一个容器元素中有4个元素。容器元素的高度将设置为浏览器窗口的100%。4个内部元素将彼此垂直堆叠(正常情况下)。前两个元素和最后一个元素应该有一个“自然”的高度(即:足够适合它们的内容)。第三个元素应该扩展以填充容器中可用的空间，在其他三个元素吃完所有它们需要的之后。

因此，它看起来像这样：

​

​

我不能为Element-1、Element-2或Element-4设置显式高度，也不知道Container的高度。我也不知道Element-3的自然高度；如果它大于可用的高度，我计划使用overflow-scroll。为了说明起见，我在元素之间添加了间距，但实际元素之间也会有间距(页边距/填充)。

如何使用HTML/CSS实现这一点？如果必须做出妥协才能得到一个像样的布局，我会考虑它们。如果这项技术也适用于水平方向(我有时会用到)，就会得到加分。

Answer 1

首先，很棒的视觉效果。

其次..。javascript解决方案是不可能的吗？

更新

这只是一个示例，但我已经更新了代码，以安抚一些更挑剔的人。

http://jsfiddle.net/tsZAV/9/

Answer 2

有许多事情使得这在纯css中是不可能的。

CSS浏览器窗口可能比前3个elements.

• There的动态高度短，这不能强迫元素占据容器的其余高度。

2. 是一种文档样式语言，而不是编程语言。可以把编写CSS看作是页面应该尝试遵循的一组准则，而不是显式设置大小的一种方式(尽管您可以显式设置大小)。

使用JavaScript调整第四个元素的大小相对简单。您必须侦听resize事件，以便相应地调整第四个元素的大小。此外，您还需要为元素-4设置一个min-height值，以防没有足够的空间容纳第四个元素。