calc()混用百分比和固定值常失效，因%依赖父容器明确高度，若父级height为auto，则100%解析为0px，导致calc(100% - 60px)计算崩塌；须确保父容器有height（如100vh或固定值），或改用视口单位避开依赖。
calc() 里混用百分比和固定值为什么经常失效
因为 calc() 中参与运算的值必须是「可比较单位」——百分比（%）只有在父容器有明确高度时才有意义，而 height: 100% 本身又依赖父级高度。如果父级 height 是 auto（默认），那 calc(100% - 60px) 的 100% 实际解析为 0px，整个计算就崩了。
常见错误现象：height: calc(100% - 60px) 写在子元素上，但父容器没设 height，结果高度塌陷；或者用了 min-height 却忘了它不触发百分比计算上下文。
- 确保父容器有明确的
height（比如height: 100vh或height: 500px），或使用min-height+display: flex布局来激活子项百分比计算 - 避免在
height: auto的父级下直接对子元素用calc(100% - X) -
vh/vmax等视口单位可替代百分比，绕过父级高度依赖，例如：height: calc(100vh - 80px)
calc() 动态减去固定头部/底部高度的正确写法
这是最常用也最容易翻车的场景：页面有固定 60px 头部，内容区想占满剩余空间。关键不是“怎么写 calc”，而是“在哪一层写”和“用什么单位锚定”。
推荐做法是把 calc() 放在**内容容器自身**，且优先用视口单位打底：
body {
margin: 0;
}
.header {
height: 60px;
}
.main {
height: calc(100vh - 60px); /* 直接减，不依赖父 height */
overflow-y: auto;
}
如果必须用百分比（比如嵌套在某个弹窗内），就得保证该弹窗有显式高度：
.modal {
height: 80vh; /* 必须设！否则 100% 无意义 */
}
.modal-content {
height: calc(100% - 48px); /* 此时 % 才指向 modal 的 80vh */
}
Flex 布局 + calc() 的协同陷阱
很多人以为 display: flex 能自动解决高度计算，其实不然：flex 容器若高度未定义，子项的 flex: 1 仍无法拉伸，此时再套 calc() 也没用。
- flex 容器必须有明确高度（
height或min-height），否则100%在子项中仍是无效值 - 更稳妥的做法是放弃
calc()，改用 flex 自身能力：.main { flex: 1; }配合.header { flex-shrink: 0; } - 如果 header 高度不固定（比如响应式变化），
calc()就不可靠，应改用gap或margin配合 flex
浏览器兼容性和 calc() 的空格规则
calc() 在所有现代浏览器中都支持（IE9+），但有两个硬性细节常被忽略：
- 加减号前后**必须有空格**，
calc(100%-60px)是非法语法，会整个声明失效；正确写法是calc(100% - 60px) - 乘除运算中，**至少一个操作数不能是百分比**，
calc(50% * 2)合法，但calc(50% * 100%)不合法（CSS 规范禁止百分比间相乘） - 函数嵌套不支持，
calc(max(100px, 50%) - 20px)会报错；如需逻辑判断，得用 CSS @media 或 container queries 替代
真正难的不是写出 calc() 表达式，而是判断当前上下文是否提供了它所需的计算基准——很多时候问题不在公式本身，而在你忘了给父容器加一行 height: 0 或 min-height: 1px 来激活百分比继承链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
