如何用CSS Flex实现固定页脚布局？

最轻量兼容方案是给footer加margin-top: auto，但需确保html和body设min-height: 100vh且margin: 0，外层容器设display: flex、flex-direction: column、min-height: 100vh，避免仅对body设flex布局。

margin-top: auto 是最轻量、兼容性最好的方案，但必须配合正确的父容器高度基准 —— 90% 的失败不是 Flex 写错了，而是 html 和 body 没设高度。

为什么 footer 总是浮在半空？

常见现象：页脚没贴底、内容少时留大片空白、滚动后 footer 被顶起。根本原因是 body 默认不占满视口，margin-top: auto 在“没空间”的容器里完全无效。

1. html 和 body 必须设 min-height: 100vh（推荐）或 height: 100%，且 margin: 0
2. 包裹内容的外层容器（如 .app 或 .wrapper）要设 display: flex + flex-direction: column + min-height: 100vh
3. 不要只给 body 加 display: flex —— 浏览器对 body 的 flex 行为支持不稳定，尤其旧版 Safari

margin-top: auto vs flex: 1 给谁加？

两者都能推 footer 到底部，但行为不同：

1. 给 footer 加 margin-top: auto：让 footer 自己“沉底”，更轻量、DOM 层级干净、兼容性更好
2. 给 main 加 flex: 1：让 main “撑开”把 footer 顶下去，适合需要主内容区滚动的场景
3. 如果同时给 footer 设了 height 和 margin-top: auto，某些 Safari 版本会算错剩余空间，导致 main 高度塌缩

内容超长时，怎么让只有 main 滚动？

默认整个页面滚动，但多数场景下希望 footer 始终可见，滚动只发生在主内容区。

1. main 必须设 flex: 1（或 flex-grow: 1），这是它能被压缩/拉伸的前提
2. 再加 overflow-y: auto，滚动条只出现在 main 内部
3. 避免给 main 设固定 height —— 会破坏响应式，且在动态内容加载后容易错位

视口变化时页脚错位怎么办？

键盘弹出、地址栏缩放、异步加载内容后高度突变，都会让 min-height: 100vh 失效。

1. 这不是 CSS 能自动修复的，需监听 resize 事件做手动重算
2. 现代浏览器可降级使用 min-height: 100dvh（dvh 是动态视口单位）
3. 移动端尤其要注意：iOS Safari 在键盘弹出时 vh 不更新，dvh 才能正确反映可用高度

真正容易被忽略的是视口高度的动态性 —— 100vh 是静态快照，100dvh 才是活的，但后者仅限较新浏览器支持。