页脚“固定在底部”分沉底和悬浮两类：沉底用flex:1+min-height:100vh实现，语义正确、响应友好；悬浮用position:fixed+padding-bottom防遮挡，仅限导航栏等脱离文档流元素，二者混用会导致遮挡或错位。
页脚“固定在底部”分两种情况：一种是随内容自然沉底（内容少时贴视口底、内容多时紧贴内容尾），这是正确做法；另一种是始终悬浮在视口最下方（如底部导航栏），必须用 position: fixed，但会脱离文档流——混用会导致遮挡、错位或打印异常。
用 flex 布局让 footer 自动沉底（推荐）
这不是“固定”，而是靠布局逻辑把 footer 挤到底部。语义正确、无障碍友好、响应式稳定，且无需 JS。
-
html和body都要设min-height: 100vh（不是height: 100vh），否则短页面下flex: 1没空间可分 -
body设display: flex; flex-direction: column，子元素顺序必须是header→main→footer -
main加flex: 1，它会自动拉伸填满剩余高度；footer不需要任何定位、margin-top: auto或固定高度 - 如果
header或footer高度不固定（比如用rem或媒体查询适配），flex: 1依然可靠；而margin-top: auto在 IE11 下有兼容问题
用 position: fixed 做悬浮操作栏（仅限导航/按钮）
这才是真正“固定在视口底部”的方式，但只适用于脱离文档流、始终可见的 UI 元素，比如移动端底部导航条。
- 必须给
body加padding-bottom，值至少等于操作栏高度（如padding-bottom: 56px），否则内容会被遮住 - 操作栏本身要写全三件套：
position: fixed; bottom: 0; left: 0; right: 0，缺一不可 - 避免在该元素内部放
<input>或<textarea></textarea>—— iOS Safari 键盘弹出后容易错位 -
z-index: 999足够，别用99999，否则和弹窗层级冲突 - 高度建议用固定值（如
56px），不用100vh或百分比，否则 Safari 地址栏收放时会跳变
为什么不能用 position: absolute 或 sticky 实现页脚沉底
position: absolute 会让 footer 脱离文档流，不再响应内容高度变化；position: sticky 是滚动触发粘性，不是内容不足时的“撑底”方案——二者都解决不了“内容少时页脚悬在半空”的核心问题。
-
bottom: 0在absolute下只相对于最近的定位祖先，若祖先没设高度，结果完全不可控 -
sticky必须配合top或bottom+ 滚动阈值，无法保证内容不足时 footer 出现在视口底部 - 两者都会破坏语义结构，影响屏幕阅读器识别和打印样式
真正容易被忽略的是：页脚是否参与文档流，决定了它能不能被内容“推下去”。一旦用了 fixed 或 absolute，你就得手动处理所有遮挡、滚动、响应式和可访问性问题——多数时候，这不是“固定”，而是给自己埋坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
