CSS变量不能直接实现高度自适应，因其不参与布局计算；需配合calc()与min-height/height等属性，并注意值类型匹配和作用域继承。
CSS变量不能直接让高度自适应
很多人误以为用 --height: auto 或 --height: 100% 就能让元素“通过变量驱动自适应”，但 CSS 自定义属性（--xxx）本身不参与布局计算，它只是个存储值的容器。浏览器不会把 height: var(--height) 当作动态撑开逻辑来执行——如果 --height 是 auto，它会被当作无效值忽略；如果是 100%，那只是普通百分比行为，依赖父容器有明确高度。
真正能起作用的组合：CSS变量 + calc() + min-height / height
变量得配合布局机制才有意义。常见且实用的模式是：用变量控制最小高度或视口比例基准，再靠 min-height 或 height 触发实际响应。
-
min-height: calc(var(--base-height, 100vh) - 60px);—— 比如减去固定头部高度，实现内容区“视口减固定值”自适应 -
height: calc(100vh - var(--header-height, 60px));—— 更稳妥，避免var()为空时整个声明失效 -
min-height: max-content;不能用变量替代，但可以用min-height: var(--min-h, 200px);做 fallback，再叠加height: auto;让内容继续撑开
容易踩的坑：变量值类型错配和继承链断裂
变量必须在生效范围内被定义，且值类型要匹配目标属性。比如：
- 写
--height: 200;（漏单位）→height: var(--height);等价于height: 200;→ 无效，浏览器忽略 - 在子元素里读
var(--height)，但变量只在父级 :root 或某祖先上定义，而中间某层写了--height: initial;→ 继承中断，读到空值 - 用
height: var(--height, 100%);，但父容器没设高度 →100%计算结果为 0px，不是“自适应”而是“塌陷”
什么时候该放弃变量，改用原生机制？
当目标是纯内容撑高（比如文章正文、评论列表），height: auto 加 min-height 就够了，加变量反而多一层维护负担。变量真正有价值的地方是：需要统一控制多个组件的基准尺寸（如所有卡片最小高度）、适配不同设备断点（@media 中重设变量）、或配合 JS 动态注入数值（如根据滚动位置更新 --scroll-y 再影响高度）。别为了用而用。
立即学习“前端免费学习笔记（深入）”；
