正确做法是将 fixed 底部元素的 bottom 设为 env(safe-area-inset-bottom)，并配合 viewport-fit=cover；主容器需加 padding-bottom 适配，sticky 不适用底部固定，键盘适配需 JS 动态处理。
用 env(safe-area-inset-bottom) 抬高 fixed 底部元素
直接写 bottom: 0 会让导航栏锚定在视口物理底部，而 iPhone X 及后续机型的底部手势条（Home Indicator）区域不属于安全区——元素会沉进去，点不动、看不见。正确做法是让元素“停在安全区起点”，即把底边抬高 env(safe-area-inset-bottom) 的距离。
关键写法：.nav-bar { position: fixed; bottom: env(safe-area-inset-bottom); left: 0; right: 0; height: 60px; }
比只加 padding-bottom 更本质：不是在容器里撑空白，而是让 fixed 元素自己避开危险区。
- 必须配
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env()返回0 - 安卓和旧 iOS 会忽略该值，自动 fallback 到
0，无副作用 - 别混用
inset简写时漏掉单位，inset: auto auto env(safe-area-inset-bottom) 0比bottom更语义清晰
主容器加 padding-bottom 预留空间防内容上浮
fixed 导航栏脱离文档流，不占空间，主内容会从视口最底端开始渲染，直接“长”进导航栏下面。这不是视觉错觉，是真实重叠。
解决方案是给根容器（如 body 或外层 <div class="app">）加 padding-bottom，值为导航栏高度 + 安全区偏移：
body { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 自定义属性统一管理
--nav-height，避免多处硬编码 - 必须用
padding-bottom，不是margin-bottom——后者在 flex/absolute 场景下易折叠或失效 - 微信 WebView 和部分 Android 浏览器对
env()支持不稳定，但 fallback 为0是安全的，不会多出空白
为什么 position: sticky 不适合底部固定
很多人想用 sticky 替代 fixed 来绕过安全区问题，但实际在移动端它根本做不到“固定在视口底部”。
-
sticky只在父容器滚动范围内生效；若父容器高度不足（比如内容少），它压根不会吸到底部 - iOS Safari 对
sticky在overflow: scroll容器内的行为极不可控，常卡在半途 - 微信 WebView 基本不支持
bottom: 0的sticky，实测多数退化成relative - 它无法响应软键盘弹出导致的视口压缩——
fixed至少能靠 JS 动态 fallback，sticky连这个机会都没有
别信 resize 或 media query 能捕获键盘状态
键盘弹出不是标准的视口尺寸变化事件。window.addEventListener('resize') 在 iOS Safari 上几乎不触发，或延迟严重；@media (height < ...) 也无法区分是地址栏隐藏还是键盘弹出。
真正有效的兜底路径只有三条：
– iOS 16.4+：用 env(keyboard-inset-bottom) + @supports 包裹
– 主流机型：用 focusin/blur 监听 + setTimeout(() => {}, 0) 等布局完成，再算 window.innerHeight - input.getBoundingClientRect().bottom
– 清除内联样式必须用 el.style.removeProperty('bottom')，写死 bottom: 0 会导致滚动时消失
复杂点在于：同一台 iPhone，横屏/分屏/多任务时 env(safe-area-inset-bottom) 可能突变，CSS 不会自动重算——真机测试不能只看竖屏常态。
