sticky定位在移动端底部导航栏失效的常见原因：sticky仅支持top或bottom单方向生效，需滚动容器有明确高度和可滚动区域；ios safari 15.4前不支持bottom，且transform等属性会中断sticky行为。
sticky定位在移动端底部导航栏失效的常见原因
直接给底部导航栏加 position: sticky 并设置 bottom: 0 是无效的。CSS 规范明确要求：sticky 只对 top 或 bottom 中**一个方向**生效，且必须配合**滚动容器有明确的高度和可滚动区域**——而多数移动端页面默认 body 高度不撑满视口，overflow 也不触发滚动，导致 sticky 根本不激活。
必须包裹在有滚动行为的父容器里
不能把 nav 直接放在 body 下指望它 sticky 到底部。正确做法是：用一个明确高度的容器（如 main）包裹主要内容，并设为 overflow-y: auto；底部导航单独提出来，放在该容器**外部但同级**，再对其父级（比如 body 或 html）设置 height: 100vh，确保滚动上下文存在。
关键点：
-
html和body都要设height: 100vh，否则子元素无法继承足够高度 - 内容区（如
<main></main>）需设height: calc(100vh - 60px)（减去导航栏高度），并加overflow-y: auto - 导航栏自身设
position: sticky+bottom: 0+z-index，且其**直接父容器必须是滚动容器或具备高度约束的容器**
兼容性与 iOS Safari 的特殊处理
iOS Safari 对 sticky 的 bottom 支持较晚（iOS 15.4+ 才稳定），旧版本会完全忽略 bottom: 0。此时 fallback 方案不是“降级为 fixed”，而是改用 position: fixed + 手动控制显示逻辑：
常见问题现象：sticky 在 iOS 上导航栏闪现、错位、或始终贴顶
- 检查是否启用了
-webkit-overflow-scrolling: touch（已废弃，但某些老项目残留会导致 sticky 失效） - 避免在导航栏父元素上使用
transform、filter或will-change，这些会创建新的层叠上下文并中断 sticky 行为 - 真机调试时，用 Safari 开发者工具 → Elements → 检查 computed 样式中
position是否仍为sticky，还是被强制转成static
更稳妥的替代方案：flex 布局 + 固定高度分配
如果项目需支持 iOS 14 或 Android 8 等旧系统，sticky 就不该作为唯一方案。用 display: flex + flex-direction: column 更可控：
html, body {
height: 100vh;
margin: 0;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
.main {
flex: 1;
overflow-y: auto;
}
.nav-bar {
flex-shrink: 0;
height: 60px;
}
这个结构下，.nav-bar 始终在底部，不依赖滚动，无兼容性风险，且天然适配键盘弹出（只要 .main 内容重绘，flex 会自动收缩）。
注意：flex: 1 必须写在内容区，不能写在导航栏；flex-shrink: 0 防止导航栏被压缩；所有父级（html、body、.app）高度链必须完整传递。
真正麻烦的从来不是写几行 CSS，而是判断「当前设备是否真的支持 bottom: sticky」以及「页面是否有意外的层叠上下文或 overflow 截断」——这两点漏掉任何一个，sticky 就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
