CSS 中使用 CSS 变量配合 calc() 实现动态高度的正确方法

css 自定义属性无法直接存储 `-webkit-fill-available` 并在 `calc()` 中参与计算，因其为关键字而非数值；推荐改用标准、响应式且兼容性更佳的 `100dvh` 单位替代。

在现代 CSS 开发中，开发者常希望借助 CSS 自定义属性（即 CSS 变量）提升样式的可维护性与复用性。但需注意：CSS 变量本质上是字符串容器，不支持运行时类型解析或单位推断。因此，如下写法是无效的：

:root {
  --fullheight: -webkit-fill-available; /* ❌ 关键字无法被 calc() 解析为长度值 */
}

div {
  height: calc(var(--fullheight) - 50px); /* ❌ 语法错误：calc() 期望数值/长度，而非未解析的关键字 */
}

浏览器会报错（如 Invalid property value），因为 -webkit-fill-available 是一个特定于 WebKit 的布局关键字，不能作为数值参与数学运算，即使通过 var() 引入也无法“激活”其语义。

✅ 正确替代方案：使用 100dvh
100dvh（dynamic viewport height）表示当前设备视口的可用高度，它能自动排除地址栏、工具栏等动态 UI 占用空间，在移动端表现更稳定，且是 W3C 标准单位，已获 Chrome 100+、Firefox 103+、Safari 16.4+ 等主流浏览器支持：

:root {
  --full-height: 100dvh; /* ✅ 合法长度值，可在 calc() 中安全使用 */
}

div {
  height: calc(var(--full-height) - 50px); /* ✅ 正确：100dvh - 50px = 有效长度 */
}

? 补充说明：

立即学习“前端免费学习笔记（深入）”；

• dvh（dynamic viewport height）比 vh 更可靠：100vh 在移动端常因地址栏展开/收起导致页面跳动或内容截断，而 100dvh 始终反映用户当前可见区域高度；
• 若需兼容较老浏览器（如 Safari

div {
  height: 100vh;           /* fallback for older Safari */
  height: 100dvh;          /* override with dynamic unit */
  height: calc(var(--full-height, 100dvh) - 50px); /* 可选：带默认值的变量写法 */
}

⚠️ 注意事项：

• 不要尝试用 --fullheight: "100dvh"（加引号）——这会将其转为字符串，同样无法参与 calc() 运算；
• 避免混用单位类型（如 calc(100% - 100dvh)），calc() 要求参与运算的值具有可比较的维度（同为长度）；
• 可通过 @supports (height: 100dvh) 进行特性检测，实现优雅降级。

总结：放弃将 -webkit-fill-available 存入变量的思路，拥抱标准化的 dvh 单位——它更语义清晰、行为可预测，且真正适配现代多态视口场景。