如何在CSS的calc函数中使用变量？存储-webkit-fill-available失败

直接将-webkit-fill-available存入CSS变量后在calc()中调用失效，核心原因是-webkit-fill-available是浏览器提供的特殊高度关键字，并非标准可运算数值类型，浏览器无法在calc上下文里正确解析它与数值的运算逻辑。以下是几种可行的解决方法：

方法一：将calc逻辑整合进CSS变量 #

把包含-webkit-fill-available的完整calc表达式定义在变量中，让浏览器能识别关键字的运算上下文：

:root {
  --fullheight-minus-50: calc(-webkit-fill-available - 50px);
}

div {
  height: var(--fullheight-minus-50);
  /* 兼容不支持-webkit-fill-available的环境 */
  height: calc(100vh - 50px);
}

方法二：结合变量与fallback值运算 #

如果需要保留--fullheight变量的通用性，可以在calc调用时为变量添加标准数值的fallback，确保运算能被正确解析：

:root {
  --fullheight: -webkit-fill-available;
  --offset-height: 50px;
}

div {
  height: calc((var(--fullheight, 100vh)) - var(--offset-height));
  /* 补充标准降级方案 */
  height: calc(100vh - var(--offset-height));
}

这里的100vh作为fallback，既可以在不支持-webkit-fill-available的浏览器中提供基础计算能力，也能让calc识别出可运算的数值类型。

方法三：字符串拼接（兼容性有限） #

利用CSS变量的字符串特性，将-webkit-fill-available作为字符串部分，通过eval()在calc中解析运算，但此方案仅部分浏览器支持，不推荐作为通用方案：

:root {
  --fullheight: "-webkit-fill-available";
}

div {
  height: calc(eval(var(--fullheight)) - 50px);
}

额外注意事项 #

• -webkit-fill-available主要用于iOS Safari等WebKit内核浏览器，解决全屏高度被系统栏遮挡的问题，使用时务必搭配100vh的降级写法，覆盖更多浏览器场景。
• 尽量避免单独将非数值关键字存入CSS变量后再参与calc运算，浏览器对这类场景的解析一致性较差。

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