底部导航栏用 fixed 定位导致内容被遮挡时，应在主容器设置 padding-bottom（非 margin-bottom），值为 calc(var(--nav-height) + env(safe-area-inset-bottom))，并配合 flex 布局控制主体高度，避免将导航栏放入 flex 容器内；sticky 不适用于底部固定，因其移动端兼容差、行为不可控；软键盘场景需监听 focus/blur 或 visualViewport 动态调整 padding，微信 WebView 中需 UA 判断兜底。
底部导航栏用 fixed 定位后内容被遮挡怎么办
直接加 position: fixed; bottom: 0; 很容易让页面主内容“钻到”导航栏下面，尤其在 iOS Safari 或微信内置浏览器里——滚动时输入框弹起、软键盘收起后布局错乱，就是这个原因。
根本问题是：fixed 元素脱离文档流，不占空间，而移动端视口高度又常动态变化（比如地址栏隐藏/显示、软键盘弹出）。
- 主容器必须预留底部安全间距，推荐用
padding-bottom而非margin-bottom，避免 margin 折叠或失效 - 值不能写死（如
60px），要匹配导航栏实际高度；用 CSS 自定义属性统一管理更稳妥：--nav-height: 60px; - 如果导航栏含
safe-area-inset-bottom（如 iPhone X+），需叠加处理：padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
Flex 布局如何配合 fixed 避免高度计算失真
很多人想用 flex 把整个页面撑满视口，再把底部导航塞进 flex-direction: column 的末尾——这在 fixed 场景下是无效的，因为 fixed 元素已不在 flex 容器内。
真正有效的组合是：flex 布局控制主体内容高度，fixed 单独抽离导航栏，两者通过 padding 配合。
立即学习“前端免费学习笔记（深入）”；
- 根容器设
display: flex; flex-direction: column; min-height: 100vh; - 主内容区用
flex: 1;占满剩余空间，同时加overflow-y: auto;确保可滚动 - 导航栏绝对不放进 flex 容器内部，而是兄弟级元素，靠
fixed定位 +z-index提层 - 别依赖
vh单位做高度基准——iOS Safari 的100vh常包含地址栏，实际可视区域更小
为什么不用 position: sticky 替代 fixed
sticky 看似更“自然”，但移动端兼容性和行为稳定性差得多：Android 低版本不支持，iOS Safari 对 sticky 在 scrollable 容器内的表现极不可控，且无法真正“固定在视口底部”——它只会在父容器范围内粘滞，一旦父容器不够高，就压根不会吸底。
-
sticky底部定位需要父容器有明确高度约束，而移动端页面高度本身就不稳定 - 微信 WebView 对
sticky的bottom支持几乎为零，实测多数情况退化成relative - 如果非要尝试，必须加
top: auto; bottom: 0;，但依然绕不开父容器高度陷阱
iOS 安全区域和软键盘导致的偏移怎么兜底
即使写了 env(safe-area-inset-bottom)，软键盘弹出时部分机型仍会把 fixed 元素顶上去，或者让 env() 值归零——这不是 bug，是系统主动重排视口的行为。
- 监听
resize事件不如监听focusin/blur针对表单控件更可靠 - 临时方案：软键盘弹起时给
body加style="padding-bottom: 200px;"（具体值根据键盘高度估算），收起后恢复 - 更健壮的做法是用
visualViewportAPI（Chrome / Edge 支持较好）：监听visualViewport.height变化，动态调整主内容区padding-bottom - 微信内嵌浏览器不支持
visualViewport，此时只能靠 UA 判断 + 固定偏移兜底
最麻烦的不是写法，而是不同场景下“底部”的定义不一致：是屏幕底边？视口底边？还是内容可滚动区域的底边？得先想清楚你要钉住的是哪一个，再选对应策略。否则调来调去都在修现象，不是解问题。
