CSS变量本身不驱动高度自适应，它只是“传参工具”；真正起效的是calc()或flex/grid的布局机制，变量只负责把动态值喂进去；用错位置或漏定义变量，整个height声明就静默失效。
直接说结论：CSS变量本身不驱动高度自适应，它只是“传参工具”；真正起效的是 calc() 或 flex / grid 的布局机制，变量只负责把动态值（比如头部高度、安全区）喂进去。用错位置或漏定义变量，整个高度声明就静默失效。
为什么calc(100vh - var(--header-height))经常不生效
这不是浏览器 bug，而是 CSS 变量未定义时的规范行为：只要 var(--header-height) 在当前作用域里没被显式声明过，整条 calc() 表达式就被当作无效值丢弃，height 属性退回到初始值（通常是 auto），卡片就塌了。
- 常见错误是拼错变量名，比如写成
--head-height却在 JS 里设的是--header-height - fallback 写成
var(--header-height, 60px)没用——只要变量名错，fallback 就不触发，控制台也不报错 - JS 动态设置后，CSS 不会自动重算：执行
document.documentElement.style.setProperty('--header-height', '80px')后，依赖它的calc()高度不会立刻更新 - 必须配合强制重排，比如调一次
getComputedStyle(el).height或加个无意义的transform: translateZ(0)
flex: 1 比 calc() 更可靠，但有前提
当卡片容器是 display: flex 且方向为 column 时，主体内容区用 flex: 1 是最稳的高度自适应方案——它不依赖任何变量，也不怕父容器高度没写死。
- 必须确保父容器有明确高度来源，比如
min-height: 100vh或height: 100%（后者要求所有祖先都设高度） - 头尾区域要设固定高度（或用
flex: 0 0 auto），否则flex: 1无法知道“剩余空间”在哪 - 卡片内部不能有
height: 100%或max-height，否则会干扰拉伸 - IE11 下
flex: 1对子项高度支持不稳定，需额外加align-self: stretch
grid-auto-rows: auto 是卡片行高自适应的正确打开方式
别碰 grid-template-rows: auto，它只管你显式写的那几行；真要让每张卡片按自己内容撑开高度，得靠 grid-auto-rows: auto —— 它管的是所有“隐式生成”的行轨道。
立即学习“前端免费学习笔记（深入）”；
- 必须搭配响应式列定义，例如
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 若想防空卡片塌缩，改用
grid-auto-rows: minmax(12rem, auto) - 卡片自身不能设
height、max-height或overflow: hidden，否则内容被截断，高度就卡死了 - 注意 UI 框架陷阱：Mantine、Chakra 等默认加
contain: layout，会切断高度传播，临时去掉就能验证
最易被忽略的一点：高度自适应从来不是单点技术问题，而是“变量定义 + 布局机制 + 渲染触发”三者咬合的结果。少一个环节，视觉就断链——尤其 JS 更新变量后不触发重排，或者 Grid 列定义没配对，都会让卡片看起来“不动”。
