Sass 用CSS计算动态高度

我有一个容器和一个元素

<div id="container">
    <div class="myEm">
        ...
    </div>
</div>

一种方法是使用填充底部或顶部来调整myEm的大小，以保持其纵横比。这使得myEm严格意义上是一个大小调整元素，您需要在其中包含一个大小与自身相符的元素。以下是我的意思，例如：

迈姆成为：

然后您需要一个包含实际内容的元素：

.myEm-inner {
  background: red;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

---

示例：

您可以使用伪元素保存包装div

此解决方案将产生相同的效果——但也会使div拉伸以适应内容——如果它变得太大而无法被正方形容纳

/*赛恩盒尺寸*/ html{框大小：边框框；} *，*：：在{框大小：继承；}之前，*：：之后 /*盒子样式*/ .盒子{ 利润率：10px； 填充：10px； 宽度：calc100%-20px； 背景色：番茄； 字体大小：10px； 浮动：左； 最大宽度：150px； } /* ––––––––––––––––––––––––––––––––––––- 这是纵横比部分 ––––––––––––––––––––––––––––––––––––- */ .box：：之前{ /*长宽比-100%=平方*/ 垫底：100%； 浮动：左； } .box：：之前， .box：：之后{ 内容：； 显示：表格； 明确：两者皆有； } /*第二箱*/ .box:nth-of-type2{背景色：橄榄色；} 我的同僚们都是精英。如果你的劳动是透明的，那么你的脸上会有一层厚厚的皱纹，因为你的眼睛会被你的眼睛所吸引

将延伸到内容 我的同僚们都是精英。如果你的劳动是透明的，那么你的脸上会有一层厚厚的皱纹，因为你的眼睛会被你的眼睛所吸引。我的验血员是透明的，我的验血员是透明的，我的验血员是透明的，我的验血员是透明的，我的验血员是透明的

---

很遗憾，我无法添加嵌套容器。我在想，是否有一种方法可以将一个变量设置为宽度，然后在高度中使用它。嗯，也许，但我想不起来。您可以直接在myEm中放置内容，但如果您想将文本居中或正确溢出，则会失去很多灵活性。请参见本页-非常令人惊讶：

.myEm {
  height: 0;
  padding-bottom: calc(100% - 20px);
  position: relative;
  width: calc(100% - 20px);
}

.myEm-inner {
  background: red;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}