求助：CSS calc()函数失效，元素高度未按容器宽度比例计算且塌陷

这个问题我之前也踩过一模一样的坑！核心原因是你误解了CSS中百分比单位的参照对象——height: 20%里的百分比是相对于父元素的高度，而不是宽度，所以哪怕你用calc(20% - 0px)做计算，本质还是基于父元素高度的20%。如果父元素没有设置明确的高度值，子元素的高度就会直接塌陷成0。

正确实现「高度为容器宽度20%」的方法 #

要实现这种基于宽度的比例高度，最靠谱的技巧是利用CSS padding的百分比特性：padding-top/padding-bottom的百分比值，不管上下方向，都是相对于父元素的宽度计算的。具体步骤如下：

• 给目标元素套一个父容器，设置position: relative，并定义好容器的宽度（比如width: 100%继承父级宽度，或者固定宽度）
• 目标元素设置绝对定位，填满父容器的空间
• 通过父容器的padding-top: 20%来撑起高度，这个值会自动基于容器宽度计算

代码示例

/* 控制宽高比的父容器 */
.aspect-ratio-wrapper {
  position: relative;
  width: 100%; /* 可根据需求调整，比如固定为600px */
  margin: 0;
  padding: 0;
}

/* 你的目标元素 */
.target-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e2e8f0; /* 方便查看效果 */
}

为什么这个方法有效？ #

假设父容器的宽度是500px，padding-top: 20%就会计算出100px的内边距高度，父容器的实际高度就被这个内边距撑起为100px。而目标元素通过绝对定位填满父容器，自然就拥有了「宽度500px、高度100px」的比例，完美匹配你要的20%宽度比例。

关于calc()的补充说明 #

如果一定要尝试用calc()，你需要结合CSS变量，但这种方法不如padding技巧稳定（因为height的百分比依然依赖父元素高度）。比如：

.aspect-ratio-wrapper {
  --container-width: 100%;
  width: var(--container-width);
  position: relative;
  height: 0; /* 先把父容器高度设为0，避免干扰 */
  padding-top: calc(var(--container-width) * 0.2);
}

.target-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

本质上还是利用padding-top的特性，只是用calc()来计算比例值，和前面的方法原理一致。

内容的提问来源于stack exchange，提问作者Maiya