position: sticky 对 footer 无效，因其需在滚动中进出视口，而 footer 常直接抵达底部；可靠方案是 flexbox（body flex column + content flex:1）或 grid（grid-template-rows: auto 1fr auto）。
为什么 position: sticky 对 footer 不起作用
position: sticky 只对「在文档流中滚动时进入/离开视口」的元素生效，而 footer 通常位于页面最底部，滚动到底部前它根本没机会“粘”——它只是自然到达底部。所以直接给 footer 加 sticky 几乎总是无效的，浏览器会降级为 static。
真正能实现“粘底”的，是让 footer 始终停在视口底部（但不遮挡内容），或当内容不足时撑满全屏、内容足够时自动沉底。这需要布局约束，不是单靠一个定位属性能解决的。
用 Flexbox 实现可靠粘性底部（推荐）
这是目前最简洁、兼容性好（IE11+）、语义清晰的方案。核心是把 body 或外层容器设为 display: flex; flex-direction: column，再让主内容区 flex: 1 占满剩余空间。
-
html和body必须设height: 100%，否则 flex 容器高度无基准 -
main或.content需加flex: 1（等价于flex: 1 1 auto），不能只写flex: 1 0 auto -
footer无需任何定位，也不用margin-top: auto—— 那是旧写法，容易在 Safari 中失效
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
/* 无定位，无 margin，自然沉底 */
}
用 Grid 实现更灵活的粘底布局
如果你已用 CSS Grid 构建整体结构，可以用 grid-template-rows 显式定义头部、内容、底部三行，并让中间行 1fr 自适应。
-
minmax(0, 1fr)比单纯1fr更安全，防止内容超长时 footer 被拉伸变形 - 若需支持 IE，Grid 方案需谨慎——IE 的
grid实现有多个已知 bug，比如1fr在嵌套容器中行为异常 - 不要给
footer设grid-row: 3等固定位置，它应由模板隐式放置
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
避免用 position: fixed 模拟粘底
虽然 footer { position: fixed; bottom: 0; width: 100%; } 看似“粘”住了，但它会脱离文档流，导致两个严重问题：
- 内容滚动时可能被
footer遮住底部（尤其表单、长列表场景） - 页面高度无法正确计算，
scrollHeight异常，影响IntersectionObserver或滚动监听逻辑 - 移动端软键盘弹出时，fixed 元素常被错误顶起或消失（iOS Safari 尤其明显）
除非你明确需要“悬浮式底部操作栏”（如音乐播放控制条），否则这不是粘性底部，而是覆盖层。
真正难的不是写出某段代码，而是判断当前布局是否允许 flex: 1 正常生效——比如父容器被 overflow: hidden 截断、或存在未重置的 margin-collapse，都会让底部“掉下去”。先检查 computed height 和 flex item 的 actual size，比反复改 position 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
