calc() 不能直接用于 height: 100% 的场景，因其依赖父容器具有确定高度（非 auto），否则 calc(100% - 60px) 会失效；推荐改用 calc(100vh - 64px) 或结合 flex/grid 的 min-height、grid-template-rows 等更可靠方式。
calc() 不能直接用于 height: 100% 的场景
当你写 height: calc(100% - 60px) 却发现没生效，大概率是因为父容器没有明确高度。CSS 中百分比高度（100%）依赖于父元素的 height 是否是「确定值」——即非 auto。如果父容器是默认的 height: auto，那 100% 就算不出来，整个 calc() 表达式就退化为无效。
常见错误现象：calc(100% - 60px) 在 Flex 容器或普通块级父容器里完全不占高，元素塌陷。
- 确保父容器设置了具体高度，比如
height: 500px或height: 100vh - 或改用 Flex 布局让子项自然撑满可用空间（见下一条）
- 避免在
position: absolute元素上单独依赖100%，除非其包含块有明确高度
用 calc() 配合 viewport 单位更可靠
比起不可靠的 100%，vh、vw 是绝对可计算的单位，calc() 和它们组合几乎不会失效。
典型使用场景：固定头部 + 自适应内容区，比如顶部导航栏高 64px，内容区填满剩余视口高度。
- 直接写：
height: calc(100vh - 64px)—— 不依赖父级，浏览器能立刻解析 - 注意：iOS Safari 对
100vh有兼容问题（地址栏收放时值会变），生产环境建议加 JS fallback 或改用dvh（height: calc(100dvh - 64px)） - 单位必须显式写出，
calc(100vh - 64)是非法的，会整个声明被忽略
calc() 在 Flex / Grid 布局中要慎用 height
Flex 容器里的子项默认不响应 height，而是由 flex-basis、flex-grow 控制尺寸。这时候硬写 height: calc(...) 往往被覆盖或忽略。
正确做法是把 calc() 移到 flex-basis 或配合 min-height 使用：
section {
flex: 1;
min-height: calc(100vh - 80px); /* 优先用 min-height，更健壮 */
}
-
flex-basis: calc(100vh - 80px)可以，但若同时设了flex: 1，它可能被拉伸覆盖 -
min-height更安全：既保证最小可用空间，又允许内容超出时自然滚动 - Grid 中同理，优先在
grid-template-rows里用calc()，比如grid-template-rows: 64px calc(100vh - 64px)
容易被忽略的空格和运算符限制
calc() 对空格敏感，而且不支持嵌套或变量引用。写错一个空格就会让整条规则失效，且 DevTools 里通常只显示“invalid value”，不报具体错。
- 必须有空格：
calc(100% - 20px)✅；calc(100%-20px)❌ - 不能混单位：
calc(100px + 1em)合法；calc(100% + 1em)合法；但calc(100vh + 100px)在部分旧浏览器（如 iOS 9 Safari）会失败 - 不能用 CSS 变量做单位：
--gap: 20px然后calc(100% - var(--gap))是合法的，但var(--gap)必须本身带单位，不能是--gap: 20
复杂布局里，calc() 是工具，不是解药。真正难的是搞清高度依赖链——哪个父级该设高、哪个该用 Flex、哪个该交由 JS 动态计算。别指望一行 calc() 拯救所有塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
