Safari中sticky footer底部留白主因是body未设height:100vh导致flex/grid失效，其次为祖先overflow静默禁用sticky或父容器缺少滚动条件；必须用height而非min-height，且需同步清margin、避免干扰声明。

直接说结论：Safari 中 sticky footer 出现底部留白，90% 是因为 body 没设 height: 100vh，导致 flex: 1 或 grid-template-rows: auto 1fr auto 失效；剩下 10% 是祖先元素的 overflow 静默禁用了 position: sticky，或父容器是 flex/grid 但没配齐滚动条件。

为什么 body 必须写 height: 100vh 而不是 min-height: 100%

移动端 Safari（尤其是 iOS 15.4–16.x）对 html 元素的高度计算不可靠，100% 会回退为 0。一旦 body 高度未定义，flex: 1 就失去基准，.content 实际高度变成 0px，footer 被挤到视口外下方——你看到的“留白”，其实是 body 总高被撑开后、滚动到底部露出的空档。

• height: 100vh 是绝对单位，不依赖父级，所有现代 Safari 均支持（iOS Safari 13.4+）
• 别用 min-height: 100vh：内容多时它不撑高，留白照旧
• 必须同步加 margin: 0，否则 UC、旧版 Safari 可能保留默认 body margin
• 删掉 min-height: auto —— 它会干扰 height: 100vh 的优先级

检查并替换静默禁用 sticky 的祖先 overflow

Safari 只要遇到任意祖先（哪怕隔三层）设置了 overflow: hidden、auto 或 scroll，且该容器自身不滚动（如高度固定、内容未溢出），就会把 sticky 元素降级为 position: static。DevTools 里 Computed → position 显示为 static 就是这个信号。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 常见藏雷位置：.ant-modal 外层 wrapper、.van-card、Tab 根节点、Swiper 父级、微信小程序 scroll-view
• 快速验证：在 DevTools 中逐级向上点开 parentElement，查每层的 overflow-x 和 overflow-y；临时删掉可疑声明，看 footer 是否立刻“吸底”
• 不能删 overflow: hidden？用 clip-path: inset(0) 替代——效果一致（裁剪、保圆角），但不创建新 BFC，也不干扰 sticky 包含块
• 别写 clip-path: inset(0px)：单位 px 在部分旧版 Safari 中解析失败

修复 flex/grid 父容器下 sticky 判定失准

当 sticky footer 直接挂在 display: flex 或 display: grid 容器下，Safari 对“可滚动区域”的判定更苛刻：它需要明确主轴空间 + 稳定基线 + 实际滚动能力。

立即学习“前端免费学习笔记（深入）”；

• 给父容器加 align-items: flex-start（避免 stretch 或 baseline 干扰“进入视口”判断）
• 显式设 max-height: 100vh + overflow-y: auto，而不是只靠 min-height: 100vh —— iOS Safari 中 vh 会随地址栏显隐抖动，导致 sticky 频繁重置
• 避免 inline-flex 或 inline-grid 父容器：它们不触发滚动上下文，Safari 直接跳过 sticky 启动逻辑
• 如果父容器是 flex，确保 flex-direction: column 且 justify-content: space-between 不与 sticky 冲突

最易被忽略的是：Safari 中 sticky 的生效前提是“父容器存在可滚动区域”，而不仅仅是“有 overflow 声明”。很多开发者删了 overflow 却忘了补 max-height 和 overflow-y: auto，结果 footer 还是悬空——它不是没粘，是压根没找到可粘的滚动上下文。