页脚不贴底主因是html和body未撑满视口高度，须设margin:0;padding:0;min-height:100vh，并用.wrapper包裹内容设display:flex;flex-direction:column;footer加margin-top:auto且为直接子元素。
页脚不贴底，90%不是 Flex 写错了，而是 html 和 body 没撑开视口——min-height: 100vh 必须落在能真正“占高”的容器上，否则 margin-top: auto 或 flex: 1 全部失效。
为什么 footer 总是浮在半空？
常见现象：内容少时页脚悬停、滚动后页脚被顶起、移动端软键盘弹出后页脚上浮。根本原因不是 CSS 属性用错，而是父级高度基准缺失。
-
html和body默认不继承视口高度，必须显式设margin: 0、padding: 0、min-height: 100vh - 不要直接给
body加display: flex——旧版 Safari 和某些第三方脚本会重置或干扰它 - 推荐包一层
.app或.page-wrapper，所有 flex 样式只加在这层上 - 如果用了
font-display: swap或图片懒加载，字体/图片加载后高度突变，也会导致页脚“跳”上来
flex: 1 和 margin-top: auto 哪个更稳？
二者都能把 footer 推到底部，但触发机制不同，适用场景有差异。
-
flex: 1是让主内容区主动拉伸填满剩余空间，适合需要内部滚动且希望内容区始终占满高度的场景 -
margin-top: auto是利用 flex 的 auto margin 吸附特性，把 footer “沉底”，对子元素 flex 行为干扰更小 - 若主内容区本身是
display: flex容器，再嵌套flex: 1可能在旧版 Chrome 触发渲染 bug；此时margin-top: auto更可靠 - 二者都要求 footer 是 flex 容器的**直接子元素**，且不能设
flex-shrink: 0、height与margin-top: auto同时存在（Safari 会算错剩余空间）
移动端和动态内容下页脚上浮怎么办？
纯 CSS 无法响应软键盘弹出、地址栏缩放、异步加载完成等视口变化事件，min-height: 100vh 不会自动重算。
- 监听
resize或orientationchange，必要时 toggle 一个 class 强制重排（如临时加transform: translateZ(0)） - 若用
margin-top: auto，某些 Android WebView 在键盘收起后不恢复，可尝试在blur后执行window.scrollTo(0, 0) - 现代方案可用
100dvh替代100vh（仅支持 Chrome 105+、Safari 16.4+、Firefox 110+），它能自动排除地址栏/软键盘占用高度 - 避免给 footer 设固定
height同时又依赖margin-top: auto，字体加载或图片尺寸未定会导致高度抖动
真正容易被忽略的是：视口单位不是“一劳永逸”的魔法值，它只在初始渲染时计算一次；任何后续高度变化（哪怕只是行高微调）都可能让页脚脱离预期位置——这时候靠 JS 补位不是妥协，而是必要动作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
