CSS 自定义属性与 calc() 的组合常常被看作实现动态布局的捷径，但两者叠加时，变量的文本替换特性会直接影响 calc() 的解析结果。比如同样一句 height: calc(100vh - var(--header-h))，当 --header-h 定义为 56px 时表现正常，如果误写为 56，整条声明会因为缺少单位而失效。理解清楚这个替换过程，比单纯记忆写法更重要。
CSS变量在calc()中的替换逻辑与易错点
CSS 变量本质上是一种自定义属性，浏览器在样式计算阶段会先执行变量替换，再对得到的结果进行语法解析。也就是说，calc() 看到的是变量展开后的完整表达式，而不是变量本身。如果展开后的表达式不符合 CSS 数值语法，该声明会被判定为无效，属性值回退到层叠中的前一层或初始值。
最常见的问题是单位丢失。变量 --gap: 16 保存的是数字，无法直接参与带单位的加减运算。写成 calc(100% - var(--gap)) 展开后变成 calc(100% - 16)，在 CSS 中百分比减数字没有意义，因此整条规则不生效。解决方式是给纯数字变量补上单位，例如 calc(var(--gap) * 1px)。但要注意乘除法不会引入单位，只有数值结果，所以 var(--gap) * 1px 才会产生 16px。
另一个容易忽略的细节是 calc() 中的加号和减号前后必须保留空格。CSS 语法规定 + 和 - 是二元运算符，如果和数字连在一起会被当作正负号或字符串的一部分。比如 calc(100vh-var(--header-h)) 并不等价于 calc(100vh - var(--header-h))，前者很可能是一条无效声明。养成在运算符两侧留空格的习惯，可以避免这类隐蔽错误。
:root {
--header-h: 56px;
--footer-h: 40px;
--gap-num: 16;
}
.content {
/* 正确：展开后为 calc(100vh - 56px - 40px) */
height: calc(100vh - var(--header-h) - var(--footer-h));
/* 正确：数字变量通过乘法补单位 */
margin-top: calc(var(--gap-num) * 1px);
/* 错误：展开后为 calc(100vh - 16)，单位缺失 */
height: calc(100vh - var(--gap-num));
}
在变量参与运算前，务必确认变量定义中携带了正确单位。对于间距、字号等数值型变量，统一以带单位的长度值存储相对简单；如果出于复用考虑想存纯数字，那么所有使用处都需要乘以 1px 或 1rem，否则难以保证声明有效。
动态高度的三种常见实现方式
动态高度通常不是指高度自动变化，而是希望某个容器的高度由其他已知尺寸推导出来。利用 CSS 变量和 calc()，可以把头部、底部、最小偏移量等抽象成变量，再集中计算主体区域。下面三种方式覆盖了大多数布局需求。
方式一：视口高度减去固定组件。这是最典型的应用，适合全屏后台布局。将 100vh 作为基准，减去头部和底部高度，中间内容区即可占满剩余空间。变量可以在 :root 中统一定义，主题切换时只需改一处。
:root {
--layout-header-h: 64px;
--layout-footer-h: 48px;
}
.app-main {
height: calc(100vh - var(--layout-header-h) - var(--layout-footer-h));
overflow-y: auto;
}
方式二：与视口单位混合计算。有时高度需要跟随屏幕宽度或高度轻微浮动，例如横幅高度等于基础高度加屏幕宽度的 10%。此时变量负责固定部分，calc() 负责混合。
:root {
--banner-base-h: 180px;
}
.banner {
height: calc(var(--banner-base-h) + 12vw);
min-height: 220px;
}
方式三：用 min() 或 max() 钳制动态结果。calc() 可以与 min()、max() 嵌套，为计算值设置上限或下限。例如内容区高度不能超过 720px，又要在小屏上尽量填满，可以写成下面这样。
:root {
--header-h: 56px;
}
.content-box {
height: min(calc(100vh - var(--header-h)), 720px);
}
这种方式在响应式设计里很实用，既能保留动态计算，又避免超大屏幕下内容区域被拉伸得过长。配合 max() 也可以保证最低高度。
作用域、回退值和@property类型校验
CSS 变量的作用域遵循层叠规则，在 :root 中声明的变量是全局的，但局部组件内可以重新赋值。calc() 使用的变量值取决于当前元素的层叠结果，所以同一个计算表达式在不同组件中可能得到不同高度。例如在 .sidebar 内覆盖 --header-h，不会影响其他区域。
:root {
--header-h: 60px;
}
.sidebar {
--header-h: 48px;
}
.sidebar .panel {
height: calc(100vh - var(--header-h));
}
如果变量可能未定义，var() 的第二个参数可以作为回退值。这个回退值同样会参与 calc() 的解析，因此也必须带上单位。例如 calc(var(--header-h, 56px) - 20px)，变量缺失时会被替换为 56px。不过 var() 的回退不能用于纠正错误单位，比如变量定义为 56 时，回退值不会自动生效。
对于需要严格保证类型的动态尺寸，可以使用 CSS Houdini 的 @property 注册自定义属性。注册时指定语法为 <length>，当赋值不符合长度类型时，浏览器会忽略该赋值并使用 initial-value，从而从源头阻止单位错误。
@property --header-h {
syntax: '<length>';
inherits: true;
initial-value: 60px;
}
:root {
--header-h: 64px;
}
.layout-main {
height: calc(100vh - var(--header-h));
}
@property 目前在现代浏览器中得到较好支持，但在旧版浏览器中可能失效。没注册时变量永远是字符串，注册后才有类型约束。如果项目需要兼容旧浏览器，仍然需要在代码层面保证变量值带单位，或使用纯数字乘以 1px 的方式。
实用建议：让动态高度计算更易维护
动态高度相关的变量如果散落在各个组件中，后期调整会非常痛苦。建议在 :root 中集中声明与布局尺寸相关的变量，并按照 --scope-size 的命名方式区分。比如 --header-height、--footer-height、--sidebar-width，避免只写 --h 这类难以追溯的名称。
对于既要动态计算又要设置兜底的情况，可以组合 var() 的回退值和 min()、max()。例如 height: min(calc(100vh - var(--header-h, 56px)), 900px) 既能处理变量未定义，也能在大屏上限制最大高度。这样一条声明就能覆盖正常、异常和极端屏宽三种状态。
如果动态高度涉及多个组件，优先考虑在布局容器上一次性计算，而不是每个子组件各自计算。子组件内部继续使用 height: 100% 或 flex: 1 来继承容器高度，可以避免重复的 calc() 表达式，也方便后续修改头部高度时只需调整一个变量。
:root {
--header-height: 60px;
--footer-height: 40px;
}
.app-shell {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-body {
flex: 1;
min-height: 0;
}
.app-body--fixed {
height: calc(100vh - var(--header-height) - var(--footer-height));
}
CSS 变量的动态性主要体现在层叠和继承，而 calc() 只是表达式的求值工具。把变量当作带类型的尺寸数据来管理，在 calc() 中正确展开为完整表达式，就能避免大多数无效声明。遇到高度异常时，优先检查变量值是否带单位、运算符两侧是否有空格、变量是否在预期作用域内，通常能快速定位问题。