html – CSS布局中的“Whatever the Left”

概述我在容器元素中有4个元素.容器元素的高度设置为浏览器窗口的100％. 4个内部元素将垂直堆叠在一起(正常情况下).前两个元素和最后一个元素应该具有“自然”高度(即：足以适合其内容).第三个元素应该扩展以填充容器中的可用空间,之后其他3个元素需要它们. 所以,它看起来像这样： 我无法为Element-1,Element-2或Element-4设置明确的高度,也不知道Container的高度.我也不知 我在容器元素中有4个元素.容器元素的高度设置为浏览器窗口的100％. 4个内部元素将垂直堆叠在一起(正常情况下).前两个元素和最后一个元素应该具有“自然”高度(即：足以适合其内容).第三个元素应该扩展以填充容器中的可用空间,之后其他3个元素需要它们.

所以,它看起来像这样：

我无法为Element-1,Element-2或Element-4设置明确的高度,也不知道Container的高度.我也不知道Element-3的自然高度;我计划使用溢出滚动,如果它变大,那么可用.为了说明,我在元素之间添加了间距,但实际元素之间也会有间距(边距/填充).

你是如何使用HTML / CSS实现这一目标的？如果必须妥协以获得合适的布局,我会考虑它们.如果该技术也适用于水平(我偶尔需要),则奖励积分.

解决方法 首先,很棒的视觉效果.

其次..一个javascript解决方案是不可能的？

更新

这只是一个样本,但我更新了代码以安抚一些更挑剔的人.

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

总结

以上是内存溢出为你收集整理的html – CSS布局中的“Whatever the Left”全部内容，希望文章能够帮你解决html – CSS布局中的“Whatever the Left”所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。