能否用calc和var实现div高度随宽度动态变化（无需JavaScript）

当然可以！完全不需要JavaScript就能实现这个需求，用纯CSS的calc()结合CSS变量和clamp()就能轻松搞定，完美匹配你要的线性变化效果。

核心逻辑拆解 #

首先我们理清楚数值关系：

• 宽度变化范围：470px - 350px = 120px
• 高度变化范围：100px - 0px = 100px
• 线性比例：每减少1px宽度，高度减少 100/120 = 5/6 px

转化为CSS公式就是：

高度 = (当前宽度 - 最小宽度) / 宽度变化范围 × 最大高度

我们用clamp()把高度限制在0px到100px之间，避免出现负数或超出预期的高度值。

实现代码示例 #

如果你的div是自适应父容器宽度（在350px到470px之间变化），可以用下面的代码：

.placeholder-div {
  /* 定义可复用的变量，方便后续调整 */
  --min-width: 350px;
  --max-width: 470px;
  --max-height: 100px;

  /* 让宽度在350px-470px之间自适应父容器 */
  width: clamp(var(--min-width), 100%, var(--max-width));
  
  /* 核心计算：线性关联宽度和高度 */
  height: clamp(
    0px,
    calc(var(--max-height) * (100% - var(--min-width)) / (var(--max-width) - var(--min-width))),
    var(--max-height)
  );

  background: #eee; /* 仅用于可视化效果，可删除 */
}

代码效果验证 #

• 当父容器宽度为470px时，div宽度是470px，计算得高度为100px
• 当父容器宽度为410px时（中间值），div宽度是410px，计算得高度为50px
• 当父容器宽度为350px时，div宽度是350px，计算得高度为0px

所有场景下高度都是线性变化的，完全符合你的需求。

如果div宽度是固定值（非自适应） #

如果你的div宽度是通过固定值或其他方式设置的，只需要把100%替换为一个存储当前宽度的CSS变量即可：

.placeholder-div {
  --min-width: 350px;
  --max-width: 470px;
  --max-height: 100px;
  --current-width: 470px; /* 这里设置当前div的宽度 */

  width: var(--current-width);
  height: clamp(
    0px,
    calc(var(--max-height) * (var(--current-width) - var(--min-width)) / (var(--max-width) - var(--min-width))),
    var(--max-height)
  );

  background: #eee;
}

之后只要更新--current-width变量，高度就会自动同步计算。

兼容性说明 #

calc()、CSS变量和clamp()都是现代浏览器广泛支持的特性，Chrome、Firefox、Safari、Edge等主流浏览器都能完美运行，不需要担心兼容性问题。

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