gpt4 book ai didi

html - CSS 布局中的 "Whatever is Left"

转载 作者:太空狗 更新时间:2023-10-29 15:47:30 27 4
gpt4 key购买 nike

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

所以,它看起来像这样:

CSS Stacked Elements

我无法为 Element-1、Element-2 或 Element-4 设置明确的高度,我也不知道容器的高度。我也不知道 Element-3 的自然高度;我计划使用 overflow-scroll 如果它变得比可用的更大。我在元素之间添加了间距以供说明,但实际元素之间也会有间距(边距/填充)。

如何使用 HTML/CSS 实现这一目标?如果必须做出妥协以获得体面的布局,我会考虑它们。如果该技术也水平应用(我有时需要),则加分。

最佳答案

首先,很棒的视觉效果。

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

更新

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

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

关于html - CSS 布局中的 "Whatever is Left",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4879087/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com