Safari 15+ 底部地址栏动态变化导致 fixed 元素不贴底，主因是 layout viewport 与 visual viewport 分离、安全区未适配、父容器 transform 干扰及 width 溢出等；应仅设 bottom: env(safe-area-inset-bottom)、viewport-fit=cover、box-sizing: border-box，并按环境分层兜底。
因为 Safari 15+ 动态收起/展开底部地址栏，导致 fixed 元素锚定的视口高度实时变化，但它不会重排——空隙不是 bug，是 layout viewport 和 visual viewport 分离的必然结果。
bottom: 0 却没贴底？检查 top 是否干扰
fixed 元素只应锚定一个方向。同时设 top 和 bottom 会触发浏览器冲突计算，尤其在 iOS Safari 中容易 fallback 到默认偏移。常见错误写法：top: auto; bottom: 0; 或残留的 top: 0;。
- 删掉所有
top、left（除非你明确需要水平偏移） - 只保留
position: fixed; bottom: 0; left: 0; right: 0; - 确认父容器没设
transform或perspective——这会让fixed元素退化为 relative 定位
空隙来自安全区，不是地址栏
iPhone X 及后续机型底部有约 34px 的系统手势条区域，env(safe-area-inset-bottom) 返回的就是这个值。但很多人误以为它是“地址栏高度”，其实地址栏收起后空隙仍在——这是两个独立问题。
-
bottom: 0会让元素沉到物理屏幕底边，直接盖住手势条，导致按钮不可点 - 正确做法是：用
bottom: env(safe-area-inset-bottom)替代bottom: 0，让元素停在安全区内边缘 - 必须配合
<meta name="viewport" content="viewport-fit=cover">，否则env()返回0
width: 100% 溢出导致右侧被截，看起来像留空
当 fixed 底栏含 padding 或 border，且未设 box-sizing: border-box 时，width: 100% 仅指内容宽度，总宽 = 100% + 左右 padding + 左右 border → 溢出视口，右侧内容被裁切，左侧可能因 flex 或 text-align 显得“空”。
立即学习“前端免费学习笔记（深入）”；
- 强制加
box-sizing: border-box到底栏元素上 - 若需左右留白，改用
left: 15px; width: calc(100% - 30px);，别依赖padding推动定位 - 避免在
fixed元素上用margin: 0 auto——它无效，auto外边距对脱离文档流的元素不起作用
键盘弹出、横竖屏切换后空隙复现
软键盘拉起时，iOS 会临时压缩视口高度，window.innerHeight 变小，但 fixed 元素不会自动响应；横竖屏切换也可能触发 viewport 重算延迟。
- 监听
resize事件，动态重设底栏bottom值（注意防抖，避免高频触发） - 微信 WebView 中
env()不生效，需 UA 判断 + JS 读取screen.height - window.innerHeight估算安全区 - 更稳妥的做法：放弃纯 CSS，用
absolute+ 父容器height: 100vh; min-height: -webkit-fill-available;隔离视口变化
真正麻烦的不是写几行 CSS，而是同一套规则在 iOS 15.0–15.3、15.4+、Safari 和微信 WebView 中行为不一致——env()、100vh、fixed 重排时机全都不统一。别指望一个声明通吃，得按设备和运行环境分层兜底。
