页脚贴底需父容器撑满视口：html和body设min-height: 100vh且margin: 0，外层容器用display: flex+flex-direction: column+min-height: 100vh，footer作为直接子元素设margin-top: auto。
直接用 margin-top: auto 就能推页脚到底部，但前提是父容器必须撑满视口高度——90% 的失败不是 CSS 写错了，而是 html 和 body 没设高度基准。
为什么 footer 总是浮在半空？
常见现象：页脚没贴底、内容少时留大片空白、滚动后 footer 被顶起。根本原因是 body 默认不占满视口，margin-top: auto 在“没空间”的容器里完全无效。
-
html和body必须设min-height: 100vh（推荐）或height: 100%，且margin: 0 - 包裹内容的外层容器（比如
.app或.wrapper）要设display: flex+flex-direction: column+min-height: 100vh - 不要只给
body加display: flex——浏览器对body的 flex 行为支持不稳定，尤其旧版 Safari
footer 加 margin-top: auto 还是 main 加 flex: 1？
两者都能推 footer 到底部，但行为不同：前者让 footer 自己“沉底”，后者让 main “撑开”把 footer 顶下去。实际更推荐前者，更轻量、兼容性更好、DOM 层级更干净。
- footer 必须是 flex 容器的直接子元素，且排在
main之后 - 只给 footer 加
margin-top: auto，其他什么也别设（不用flex、不用height、不用flex-shrink: 0） - 如果同时给 footer 设了
height和margin-top: auto，某些 Safari 版本会算错剩余空间，导致main高度塌缩
内容超长时，滚动区域该在哪？
默认整个页面滚动，但多数场景下希望只有主内容区滚动，footer 始终可见。这时不能只给 main 加 overflow-y: auto 就完事——它必须有明确的高度约束，否则会无限撑高。
立即学习“前端免费学习笔记（深入）”；
-
main元素需设flex: 1（或flex-grow: 1），这是它能被压缩/拉伸的前提 - 再加
overflow-y: auto，滚动条只出现在main内部 - 避免给
main设固定height——会破坏响应式，且在动态内容加载后容易错位
真正容易被忽略的是视口变化：键盘弹出、地址栏缩放、异步加载内容后高度突变，都会让 min-height: 100vh 失效。这不是 CSS 能自动修复的，需要监听 resize 或使用 100dvh（仅现代浏览器支持）做降级处理。
