答案是：必须为html和body设置height:100%或min-height:100vh并清除margin，外层容器设display:flex+flex-direction:column+min-height:100vh，footer加margin-top:auto且为直接子元素。
直接用 flex-direction: column + margin-top: auto 就能实现，但前提是父容器必须撑满视口高度——绝大多数失败案例都卡在这一步，不是 Flex 写错了，而是 html 和 body 没设高度基准。
为什么 footer 总是浮在半空？
常见现象：页脚没贴底、内容少时留大片空白、滚动后 footer 被顶起。根本原因是 body 默认不占满视口，margin-top: auto 或 flex: 1 在“没空间”的容器里完全无效。
-
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 层级更干净。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 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（仅现代浏览器支持）做降级处理。
