最稳解法是给主内容容器设margin-bottom（含safe-area-inset-bottom），配viewport-fit=cover；因fixed脱离文档流，主内容需主动退让，margin-bottom比padding-bottom更可控、不干扰滚动和脚本。
直接给主体内容容器加 margin-bottom，值等于底部栏高度，是最稳、最可控的解法；padding-bottom 加在 body 上看似简单，但容易干扰滚动判断和第三方脚本。
为什么 margin-bottom 比 padding-bottom 更推荐
遮挡本质是文档流里“没给固定元素留位”，不是层级问题。加 margin-bottom 是让内容块自己退后一步，不依赖父容器盒模型，也不会影响 scrollHeight、IntersectionObserver 或滚动条行为。
-
margin-bottom作用于main或.content这类主内容容器，语义清晰、可预测 -
padding-bottom加在body上时，若页面有横向滚动条，会额外撑出空白区，导致触底逻辑失效 - 用 CSS 变量管理高度更安全：先定义
:root { --nav-height: 60px; }，再写main { margin-bottom: var(--nav-height); } - 别对
body设margin-bottom——某些浏览器会触发布局抖动或滚动偏移
iOS Safari 下视口变化导致预留空间不准怎么办
iOS 地址栏收起/展开、键盘弹出时，window.innerHeight 会变，但 fixed 元素不会重定位，硬编码的 60px 就会错位。
- 优先用
env(safe-area-inset-bottom)处理 iPhone 底部安全区：给底部栏加padding-bottom: env(safe-area-inset-bottom); - 配合 JS 监听
resize事件动态更新 CSS 变量：document.documentElement.style.setProperty('--nav-height', window.innerHeight - document.documentElement.clientHeight + 'px'); - 避免用
position: sticky替代fixed——它依赖父容器高度约束，在长页面中容易失效 - 禁用已废弃的
-webkit-overflow-scrolling: touch，它和fixed定位存在已知冲突
底部栏内有输入框时 iOS 键盘弹出会顶飞工具栏
键盘唤起后，iOS Safari 会强制滚动视口，把 position: fixed 元素错误地“钉”在旧位置，导致按钮被顶走或错位。
- 监听
focusin事件，临时将底部栏切为position: absolute，并用bottom: 0+width: 100vw模拟固定效果 - 失去焦点后（
blur）立刻切回position: fixed - 不要依赖
transform: translateZ(0)或will-change解决这个问题——它们防闪动，但不解决键盘引发的定位偏移 - 如果使用 Hybrid WebView，需检查原生层是否启用了“自动调整视口”特性，必要时通过 JS 注入同步修正
bottom值
真正麻烦的从来不是“怎么写 CSS”，而是不同设备、不同状态下的高度不一致——尤其是 iOS 键盘和地址栏带来的视口跳变。留白值必须能响应变化，而不是写死一个数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
