html - 如何根据高度动态设置方形 div 的样式？

Question

我已经阅读了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;
}

JSFiddle for the above

有谁知道如果没有 JS 或每次都对尺寸进行硬编码是否可行？谷歌搜索找不到任何适用于动态高度的东西——即使有引号。 :(

Answer 1

在您的情况下，JS 是唯一可靠的选择。

在 CSS 盒模型(和一般的 HTML)中，宽度和高度不对称。

一般来说，HTML 具有“无尽的磁带”布局模型 - 宽度是固定的(由 View /窗口决定)但高度事先未知 - 需要计算。

CSS 按照以下步骤进行布局:

1. 在左右边界内进行水平布局。最后，这将为您提供内容高度。
2. 如果 height:auto(默认情况下)设置在第 1 步计算的元素高度。
3. 如果需要(table-cell 和 flexbox 元素)进行垂直对齐。

从数学上讲 height = F(width,content) 这里的 F 是一个 step function - 不同的输入宽度值可能会给你相同的输出高度值。阶跃函数没有确定的反函数 - 没有这样的 inverse function F' 将允许您计算 width = F'(height,content)。

(请原谅纯 CSS 主题的数学问题，但我不知道如何解释它。)