如何在 calc() 中使用 var()？

问题描述

我正在尝试以下操作，以便从其下方的元素中减去标题的高度。

header {
  height: var(--header-height);

  --header-height: 150px;
}

main {
  height: calc(100% - var(--header-height));
}

我做错了什么？

为什么不计算 calc() 中的“150px”值？

解决方法

我将变量的声明移到了这个：

:root {
  --header-height: 200px;
}

现在可以了！