CSS布局中的"Whatever the Left"
Cra*_*ker 5 html css layout positioning
我在容器元素中有4个元素.容器元素的高度设置为浏览器窗口的100%.4个内部元素将垂直堆叠在一起(正常情况下).前两个元素和最后一个元素应该具有"自然"高度(即:足以适合其内容).第三个元素应该扩展以填充容器中的可用空间,之后其他3个元素需要它们.
所以,它看起来像这样:
我无法为Element-1,Element-2或Element-4设置明确的高度,也不知道Container的高度.我也不知道Element-3的自然高度; 我打算使用overflow-scroll它,如果它变得更大,那么可用.为了说明,我在元素之间添加了间距,但实际元素之间也会有间距(边距/填充).
你是如何使用HTML/CSS实现这一目标的？如果必须妥协以获得合适的布局,我会考虑它们.如果该技术也适用于水平(我偶尔需要),则奖励积分.
首先,很棒的视觉效果.
其次..一个javascript解决方案是不可能的？
更新
这只是一个样本,但我更新了代码以安抚一些更挑剔的人.