我已经阅读了this Q&A以及它链接到的博客文章。这里的问题是,如果您设置了宽度并且正在动态设置高度,则引用的方法仅有效。但是,如果您需要相反的东西——高度已知但宽度未知,您怎么能做到呢?
我有一个在 CSS 中指定的视觉元素,我需要在多个上下文中始终显示。 (出于本练习的目的,它也可能是一个红色方 block 。)上下文已经设置了高度——例如一个高度为 x 的导航栏,一个高度为 y 的列表项,等等。因此,元素的宽度需要基于高度——而不是相反。
我尝试反转链接文章中提到的方法(使用 height
而不是 width
,使用 padding-right
而不是 padding-top
),但它不起作用——元素最终没有宽度,因此红色方 block (.my-box .content
) 没有出现:
HTML:
<div class="outer">
<div class="my-box">
<div class="content">
</div>
</div>
<div class="more-stuff">
Some more stuff goes here
</div>
</div>
CSS:
.outer {
background-color: white;
height: 72px;
padding: 12px;
display: flex;
flex-direction: row;
}
.my-box {
height: 100%;
position: relative;
}
.my-box::before {
content: "";
display: block;
padding-left: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
.more-stuff {
flex: 1 1 auto;
margin-left: 12px;
}
有谁知道如果没有 JS 或每次都对尺寸进行硬编码是否可行?谷歌搜索找不到任何适用于动态高度的东西——即使有引号。 :(
最佳答案
在您的情况下,JS 是唯一可靠的选择。
在 CSS 盒模型(和一般的 HTML)中,宽度和高度不对称。
一般来说,HTML 具有“无尽的磁带”布局模型 - 宽度是固定的(由 View /窗口决定)但高度事先未知 - 需要计算。
CSS 按照以下步骤进行布局:
- 在左右边界内进行水平布局。最后,这将为您提供内容高度。
- 如果
height:auto
(默认情况下)设置在第 1 步计算的元素高度。 - 如果需要(table-cell 和 flexbox 元素)进行垂直对齐。
从数学上讲 height = F(width,content)
这里的 F 是一个 step function - 不同的输入宽度值可能会给你相同的输出高度值。阶跃函数没有确定的反函数 - 没有这样的 inverse function F' 将允许您计算 width = F'(height,content)
。
(请原谅纯 CSS 主题的数学问题,但我不知道如何解释它。)
关于html - 如何根据高度动态设置方形 div 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34522001/