min-height: 100vh 必须加在 main 的直接父容器（通常是 body）上，否则 flex 容器高度为 0，flex-grow: 1 失效；加在 html 或漏设 body 高度均会导致布局失败。
为什么 flex-grow: 1 必须加在 main 上，而不是 footer 或 body
因为“粘底”的本质是让中间内容区主动吸收剩余空间，把页脚往下推——不是页脚自己“贴”到底部。flex-grow: 1 只对 flex 子项生效，且只在主轴方向起作用。如果加在 footer 上，它会和 main 争抢空间，导致页脚膨胀、内容被压缩甚至遮挡；body 是 flex 容器本身，不是子项，不能设 flex-grow。
min-height: 100vh 必须加在哪个元素上？加错就失效
必须加在 main 的**直接父容器**上，通常是 body。如果只加在 html 或漏掉 body，flex 布局就无高度可撑——flex 容器自身高度为 0，flex-grow: 1 就没作用对象。
- ✅ 推荐写法：
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; } - ❌ 错误写法：只给
html设height: 100%，但body没设高度或有默认 margin - ⚠️ 注意 iOS Safari：100vh 在地址栏收起/展开时会重算，造成轻微跳动；生产环境建议搭配
100dvh（需检查兼容性）或 JS 动态 fallback
常见失效现象与对应修复点
页脚“悬空”或“压住内容”，90% 是因为布局链断裂或定位干扰。
- 页脚飘在半空：父容器没设
min-height: 100vh，或main没设flex-grow: 1；检查是否误用了height: 100%而非min-height - 长页面时页脚遮挡正文：用了
position: fixed或absolute；立刻删掉，改用 flex 布局，footer必须留在文档流中 - 移动端页脚被软键盘顶起：100vh 在键盘弹出时被重算；临时方案是监听
resize事件，用document.documentElement.clientHeight动态更新容器高度 - 第三方 CSS 注入了
body的 margin（如某些 reset 库），导致min-vh-100计算溢出；可在 DevTools 中检查html → body链路的 computed height 是否等于 viewport 高度
Bootstrap 中怎么快速实现？别手写 flex: 1
Bootstrap 5 提供了 .flex-fill 工具类，它是 flex: 1 1 auto 的语义化别名，比内联写 style="flex: 1" 更可靠，也避免了 flex-shrink 在窄屏下意外压缩内容的问题。
- 结构示例：
<div class="d-flex flex-column min-vh-100"> <header></header><main class="flex-fill">内容</main><footer>底部</footer> </div> - 注意：外层容器必须存在且包裹全部三部分；若用了
.container-fluid，要确认它没被max-width限制宽度，间接影响高度渲染 - 调试建议：在 DevTools 中逐级检查
html → body → .d-flex的 height 是否为 100%，并确认 computed height 是否匹配 viewport
margin: 0 或写错一个父容器的高度声明，整个布局就会崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
