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有＆＃34;无尽的磁带＆＃34;布局模型 - 宽度是固定的（通过视图/窗口），但高度是未知的 - 需要计算。

CSS按以下步骤进行布局：

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

数学上说height = F(width,content)而F这里是step function - 不同的输入宽度值可能会给出相同的输出高度值。阶梯函数没有确定的反函数 - 没有这样的inverse function F＆＃39;这将允许您计算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在这种情况下很有用，我希望。

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

2 个答案: