css变量用于calc()动态高度计算时，必须显式声明且单位完整，未定义变量会导致整条声明失效；flex容器中%高度不可靠，应优先用flex:1；env()需配合js监听更新，ie不支持var()在calc()中使用。
calc() 里怎么用 CSS 变量做动态高度计算
必须先声明 --header-height、--footer-height 这类自定义属性，否则 calc(100vh - var(--header-height) - var(--footer-height)) 会直接失效——浏览器把未定义的 var() 当成无效值，整条 height 声明被丢弃。
常见错误是写成 calc(100vh - var(--header-height, 60px))，以为 fallback 能兜底，但实际只要变量名拼错（比如 --head-height），fallback 就不生效，且控制台不报错，排查极难。
- 变量必须在 :root 或目标元素作用域内显式定义，不能靠 JS 动态注入后立刻在 CSS 中引用
- 单位必须显式写出：写
var(--gap)不行，得是var(--gap, 12px)，且 fallback 单位要和使用处一致 - Chrome 99+ 支持
env()读取环境变量（比如安全区），但不能和var()混在同一个calc()里做运算，会静默失败
flex + calc 混用时高度不生效的典型场景
当父容器设了 display: flex，子元素又用 height: calc(100% - 60px)，结果高度还是撑不满——因为 % 在 flex 容器里默认按 content-box 高度解析，而父容器若没设明确高度（比如只写了 min-height: 100vh），100% 就算不出数值。
此时别硬套 calc()，优先用 flex 自身能力：给主体区域加 flex: 1，头尾固定高度，flex 会自动填满剩余空间，比 calc() 更鲁棒。
- 只有需要“减去多个非 flex 固定尺寸”时才上
calc()，比如侧边栏宽度浮动 + 头部高度 JS 动态改 + 底部有视口安全区 - 用
height: calc(100vh - var(--header) - env(safe-area-inset-bottom))时，确保env()值已存在（iOS Safari 15.4+ 才稳定支持） - IE 完全不支持
calc()里的var()，如果还要兼容，只能回退到预设 CSS 类（如.layout--compact）+ 媒体查询
JS 修改 CSS 变量后 calc 不重算的坑
执行 document.documentElement.style.setProperty('--header-height', '80px') 后，依赖它的 calc() 高度没更新？不是缓存问题，是浏览器渲染管线没触发重排——CSS 变量变更本身不强制 layout，得让浏览器“感知到布局可能变”，比如改完后调一次 getComputedStyle(el).height，或给元素加个无意义的 transform: translateZ(0) 强制重绘。
- 避免在高频滚动中反复 setProperty + 强制重排，会卡顿；应节流 + 合并变量更新
- 用
CSS.supports('calc', '1px')检测基础支持，但无法检测var()在calc()中的支持程度 - 调试时在 DevTools 里 hover
calc()值，能看到实时解析结果；如果显示invalid value，八成是变量名错或单位缺失
移动端 safe-area-inset 导致 calc 高度溢出
iOS Safari 的 env(safe-area-inset-bottom) 在横屏或键盘弹出时会突变，但 calc(100vh - var(--header) - env(safe-area-inset-bottom)) 不会自动响应——它只在初始计算时读一次，后续变化不触发更新。
真正可靠的做法是监听 resize 事件，用 JS 重新 setProperty 更新变量，再让 CSS 重新计算。单纯依赖 env() + calc() 只适用于静态安全区场景（比如仅处理刘海屏常驻状态）。
-
env()的值始终是字符串，不能直接参与数学运算，必须包在var()或直接用于calc()内置函数中 - Android Chrome 不支持
env()，要用@supports (padding-bottom: env(safe-area-inset-bottom))做特性检测再降级 - 键盘弹出时
visualViewport.height才准确反映可用高度，100vh会失真，这时候calc()就不该依赖vh
事情说清了就结束。动态高度最麻烦的从来不是怎么写 calc，而是变量何时生效、在哪一级作用域有效、以及浏览器什么时候愿意为你重算——这些点不卡住，其他都好调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
