流式布局中min-height设固定值会塌陷，因其只设最小高度而不提供基准高度；需用calc(100vh - 固定值)锚定视口减去头部/底部高度，并注意空格规范与IE11兼容性fallback。
min-height设为固定值时为什么流式布局会塌陷
流式布局中，min-height设成 100px 或 20vh 很常见，但一旦容器内容极少（比如空状态），又没其他高度约束，父容器可能无法撑开——不是 min-height 失效，而是它只限制“最小”，不提供“基准”。此时需要把最小高度锚定到某个动态参考上，比如视口减去固定头部/底部的高度。
calc()里用vh单位减去固定像素的写法要点
calc() 是唯一能混合单位做算术运算的 CSS 函数，但必须注意：加减运算符前后要有空格，且单位不能混用（100vh - 64px ✅，100vh-64px ❌）。常见错误是忘记空格导致整个声明被浏览器忽略。
-
min-height: calc(100vh - 80px);—— 适用于顶部有 80px 固定 header 的单页应用 - 若 header 高度响应式（如移动端变矮），改用
calc(100vh - var(--header-height))，并确保--header-height已在 :root 或父元素定义 - 避免嵌套
calc(calc(...))，部分旧版 Safari 会解析失败
为什么不能直接用 height: calc(...) 替代 min-height
height 是强制高度，会截断内容或触发滚动条；而流式布局的核心诉求是「内容少时撑满，内容多时自适应」。用 height: calc(...) 会让超出部分溢出不可见，除非同时加 overflow: auto，但这破坏了自然流行为。
- 正确组合：
min-height: calc(100vh - 64px); height: auto; - 如果要限制最大高度防止页面过长，可叠加
max-height: calc(100vh - 64px);，但需注意这会让内容超长时被裁剪 - 某些 Flex 容器中，
min-height可能被align-items: stretch覆盖，此时需显式设置align-self: flex-start或检查父级flex-direction
兼容性与 fallback 方案怎么写
IE11 支持 calc() 但不支持 vh 在 min-height 中（仅支持 height），所以纯 calc(100vh - 64px) 在 IE11 下无效。现代项目可忽略 IE，但若需兼容，得降级。
- 先写 fallback：
min-height: 500px;（一个合理兜底值） - 再覆盖：
min-height: calc(100vh - 64px);（后写的生效） - 不用
@supports包裹——因为calc()本身支持度高，问题在vh在某些上下文中的表现，检测成本高于直接写 fallback
真正容易被忽略的是：当页面有横向滚动条时，100vh 仍按视口原始高度计算，不会自动减去滚动条宽度占用的空间，可能导致底部微小错位——这种细节只有在 macOS 隐藏滚动条 + Windows 强制显示时才会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
