css变量本身不定义高度，需配合height/min-height/max-height等属性使用；生效前提包括父容器有明确高度、变量带单位、未被重置，且多组件共用时才体现价值。
CSS变量本身不能定义容器高度，它只是存储值的“占位符”；真正起作用的是把变量用在height、min-height或max-height等布局属性上，并确保上下文支持该值生效。
为什么height: var(--h)经常不生效
这不是变量写错了，而是 CSS 高度计算机制限制了它的行为：
-
height: 100%依赖父容器有明确高度（如height: 500px或height: 80vh），否则退化为auto；height: var(--h, 100%)也一样，父高缺失时，100%算出来是0px - 变量值若漏单位（比如
--h: 300而非--h: 300px），浏览器会忽略整个height声明 - 如果变量在
:root定义，但在某个中间祖先上被重置为--h: initial，子元素就读不到值，var(--h, 200px)才会 fallback
真正能落地的三种写法
别只盯着height，优先考虑语义更稳、容错更强的组合：
-
min-height: var(--container-min-height, 400px)：内容少时撑开，多时继续生长，不截断 -
max-height: calc(var(--modal-max-height, 70vh) - 60px)：减去固定 header 高，避免遮挡操作区 -
height: clamp(240px, var(--card-height, 40vh), 600px)：三值约束，兼顾小屏可读性与大屏安全区
需要 JS 配合的动态场景
当容器高度由图片加载、字体渲染或异步内容决定时，CSS 变量必须靠 JS 注入才“有数可依”：
- 用
el.getBoundingClientRect().height测真实渲染高度（比offsetHeight更准） - 写入
document.documentElement.style.setProperty('--content-height', `${h}px`) - 在 CSS 中用
min-height: var(--content-height)驱动父容器——但别用height，否则可能触发循环布局 - 监听
ResizeObserver和MutationObserver，内容变化后重新测量，不是“设一次就完事”
最容易被忽略的一点：CSS变量的价值不在“能不能设高度”，而在于“要不要统一控制”。如果只有一个地方用--card-height，不如直接写height: 40vh；只有当多个卡片、模态框、图表共用同一套尺寸逻辑，且需响应式切换或 JS 动态调节时，变量才真正省力又可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
