CSS变量不能直接绑定height，因其仅为值容器，不参与布局计算；必须配合calc()、min-height等属性，并确保变量值含合法单位（如240px）且上下文支持该单位生效。
为什么 --height 不能直接绑定到 height 上？
CSS 变量本质是“自定义属性”，它不会自动触发布局计算。即使你写了 height: var(--height);，浏览器也不会把变量值当作动态尺寸参与盒模型计算——除非这个变量值本身是合法的长度单位（如 100px、50%），且在使用时上下文允许该单位生效。
常见错误是试图用 JS 动态写入一个无单位数字：el.style.setProperty('--height', '240');，然后指望 height: var(--height); 生效。这会失败，因为 240 不是有效 CSS 长度值，浏览器解析为 invalid value，回退到初始值 auto。
- 必须带单位：写成
el.style.setProperty('--height', '240px');或'50%' - 百分比值需注意父容器是否有明确高度，否则
height: 50%仍会塌陷 - 避免用
calc()混合单位时漏空格，比如calc(var(--h) + 10px)合法，calc(var(--h)+10px)会失效
height: var(--h) 和 min-height: var(--h) 的行为差异
直接赋给 height 是强制固定高度，内容超长会溢出或触发滚动；而 min-height 允许容器随内容自然撑开，更符合“自适应”本意。
但要注意：如果父容器没设高度，min-height: 100% 依然无效——百分比 min-height 依赖父级有确定的块级高度（非 auto）。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: var(--h)+height: auto组合，兼顾变量控制与内容伸缩 - 若需严格等高（如卡片网格），再考虑
height: var(--h)，并配合overflow: hidden或text-overflow - Flex/Grid 容器中，子项的
min-height可能被align-items覆盖，需检查对齐策略
JS 更新变量后，为什么容器没重绘？
变量更新本身不触发重排（reflow），只有当依赖该变量的属性实际影响布局时，浏览器才会重新计算。但有时因优化机制（如属性未被“观察”），变化看似无效。
- 确保变量被真实消费：检查 computed style 中
height或min-height是否已更新为预期值 - 避免在
requestAnimationFrame外批量修改多个变量，可能被合并导致中间态丢失 - 极少数情况需强制重排：读取一次
offsetHeight，再改变量（不推荐，仅调试用） - 使用
ResizeObserver监听容器尺寸变化，比轮询或事件更可靠
用 CSS 变量做响应式高度适配的陷阱
媒体查询里设置 --height 是可行的，但别忘了：CSS 变量具有继承性，且媒体查询作用域取决于选择器。写成 @media (max-width: 768px) { :root { --height: 200px; } } 会影响全局，而 .card { --height: 300px; } 只作用于该元素及其后代。
- 避免在
:root层级过度定义响应式高度变量，容易污染其他组件 - 移动端常用视口单位（
vh）搭配变量，例如--h: 80vh;，但注意 iOS Safari 对vh的兼容问题（地址栏缩放时值跳变） - 服务端渲染（SSR）场景下，
:root中的变量无法感知客户端 viewport，需 JS 补充初始化
px。 
