CSS - 我能在Calc()中使用一个对象的宽度吗？

Question

我想要这样的东西：

height: calc(width + 5px);

这只是一个小例子，但我最终想要的是一种使用设置宽度作为计算一部分的方法，而不是解决这个例子更简单的方法。我所做的任何搜索都只提供了如何使用 calc() 设置宽度的示例。谢谢！

- Austin Griner

---

也许可以研究一下JavaScript或某种CSS预处理器。或者在CSS中使用相同的宽度值... - Andrew Li

Answer 1

使用容器查询。 cqw单位表示项目宽度的1％。您可以在calc()函数中使用该单位。

我在下面的演示中使项目可调整大小，以便更容易观察功能。

.container {
  container-type: inline-size;
  background: #ddd;
  
  /* Make resizable, for demo purposes */
  resize: horizontal;
  overflow: hidden;
}

.item {
  background: orange;
}

@container (min-width: 0) {
  .item {
    /* 50% of container width + 30px */
    height: calc(50cqw + 30px);
  }
}

<div class="container">
  <div class="item">Resize me!</div>
</div>

请注意，截至2022年，容器查询是非常新的技术，不被所有浏览器支持。然而，现代的Chrome和Safari已经支持该技术。

- mfluehr

Answer 2

使用纯CSS最接近的方法可能是将CSS变量与calc结合起来。

:root {
 --width: 100px;
}
div {
 border: 1px solid red;
 height: calc(var(--width) + 5px);
 width: var(--width);
}

<div>
test
</div>

这将让您定义一个CSS变量--width并使用它来计算div的新高度。

- ecg8