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

Question

我已经阅读了this Q&A 及其链接的博客文章。这里的问题是，如果您设置了宽度并且动态设置了高度，则所引用的方法仅有效。但是如果你需要相反的情况——知道高度但不知道宽度，你怎么能做到呢？

我有一个在 CSS 中指定的视觉元素，我需要在多个上下文中始终如一地出现。 （为了本练习的目的，它也可以是一个红色方块。）上下文已经设定了高度——例如。一个高度为 x 的导航，一个高度为 y 的列表项，等等。因此，元素的宽度需要基于高度——而不是相反。

我尝试颠倒链接文章中提到的方法（使用height 而不是width，和padding-right 而不是padding-top），但它不起作用——元素最终没有宽度，因此红色方块 (.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 有“无尽的磁带”布局模型——宽度是固定的（按视图/窗口），但高度是预先不知道的——需要计算。

CSS 按以下步骤进行布局：

1. 在左右边界内进行水平布局。最后，这将为您提供内容高度。
2. 如果height:auto（默认情况下）设置在第 1 步计算的元素高度。
3. 根据需要进行垂直对齐（表格单元格和弹性框元素）。

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

（我原谅纯 CSS 主题的数学，但我不知道如何解释它。）

Answer 2

有点破解，但仍然是一个解决方案。 我们创建一个比例为 1:1 的盒子，设置宽度并旋转盒子transform: rotateZ(90deg)。

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F72F4E;
  overflow: hidden;
}


.Box {
  width: 50vmin; /* or 400px for ex. */
  position: relative;
  background-color: rgba(0,0,0,.2);
  overflow: hidden;
  position: relative;
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
}

.Box:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 100%;
}

.Box__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px;
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
}

<div class="Box">
  <div class="Box__content">Box</div>
</div>

P.S.：我希望 SVG 在这种情况下会很有用。