解决 fixed 元素遮挡内容的核心是让主体内容主动避开：对 body 或主容器设 padding-bottom（值等于 fixed 元素高度），推荐作用于最外层内容容器并配合 box-sizing: border-box；响应式可用 calc() 动态计算；禁用 margin-bottom。
使用 position: fixed 的元素（比如底部导航栏、悬浮按钮）会脱离文档流，容易盖住页面底部的正常内容。解决的核心思路是：让主体内容「感知」到 fixed 元素的存在，主动避开它。
给 body 或主容器加 padding-bottom
这是最直接、兼容性最好的方式。padding-bottom 的值应等于 fixed 元素的高度（含 border、margin 不参与计算，只看 height + padding）。
- 如果底部 fixed 导航高 60px，就在
body或包裹全部内容的容器（如#app）上设置：
padding-bottom: 60px; - 推荐作用于最外层内容容器（而非直接改 body），避免影响全局布局或第三方样式
- 配合
box-sizing: border-box可确保 padding 不额外撑大容器高度
用 calc() 动态预留空间（适合响应式）
当 fixed 元素高度随屏幕变化（如移动端适配），可用 CSS 计算动态留白：
- 例如底部栏在小屏为 60px，大屏为 80px，可结合媒体查询或 CSS 自定义属性：
padding-bottom: calc(var(--footer-height, 60px)); - 或直接写：
padding-bottom: calc(100vh - 100% + 60px);（慎用，逻辑较绕，仅作参考）
避免用 margin-bottom 替代 padding-bottom
margin-bottom 对 fixed 元素无效，且可能引发外边距合并问题；而 padding-bottom 是内容区域内部留白，稳定可控。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误示例：
main { margin-bottom: 60px; }—— fixed 元素仍会覆盖 - ✅ 正确做法：
main { padding-bottom: 60px; }或body { padding-bottom: 60px; }
注意 viewport 和滚动行为
在 iOS Safari 等环境下，fixed 元素可能因滚动时的视觉位移导致遮挡错觉。此时除了 padding，还需检查：
- 是否设置了
viewport的height=device-height（不推荐，易导致缩放异常） - fixed 元素是否加了
will-change: transform或transform: translateZ(0)提升渲染层级（辅助防闪烁，不解决遮挡） - 若用 JavaScript 动态控制高度（如键盘弹出），需同步更新 padding-bottom 值
