最轻量兼容方案是给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 在“没空间”的容器里完全无效。

• 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

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

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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

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

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

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

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

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

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！