解决 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 值