应给主体内容（如main）设置margin-bottom等于导航栏高度；优先用CSS变量动态管理，避免body padding-bottom；移动端需结合env(safe-area-inset-bottom)和resize监听适配iOS视口变化。
底部导航栏用 position: fixed 后内容被遮住怎么办
直接原因是：fixed 元素脱离文档流，不占空间，后续内容会“上浮”到它原本的位置，导致被覆盖。不是样式没生效，而是布局逻辑本身如此。
最稳妥的做法是给主体内容预留出底部导航栏的高度空间。关键不是“选 margin 还是 padding”，而是“加在谁身上、加多少、是否动态适配”。
- 加
margin-bottom到主体容器（如或）：适合内容高度固定或可预估的场景；值必须严格等于导航栏高度（例如60px）- 加
padding-bottom到或根容器：更常用，尤其当导航栏始终存在且高度不变；但注意如果页面有滚动条，padding-bottom会让滚动区域底部留白，可能影响触底判断- 如果导航栏高度响应式（比如横竖屏不同），不能写死
60px，得用calc(100vh - var(--nav-height))或 JS 动态设置 CSS 变量为什么
margin-bottom比padding-bottom更可控margin-bottom作用于内容块自身，不影响父容器的盒模型和滚动行为；而padding-bottom是撑开父容器内部空间，在body上使用时，容易和min-height: 100vh冲突，也可能让IntersectionObserver或scrollHeight计算失准。- 推荐写法：
main { margin-bottom: 60px; } - 若用 CSS 变量：
:root { --nav-height: 60px; } main { margin-bottom: var(--nav-height); } - 避免写：
body { padding-bottom: 60px; }—— 尤其在需要精确监听滚动到底部的场景下
移动端 Safari 中 fixed 底部栏的兼容陷阱
iOS Safari 在地址栏收起/展开时会触发视口高度变化，但不会重排
fixed元素，也不会自动调整你写的margin-bottom。此时硬编码的60px可能偏大或偏小。立即学习“前端免费学习笔记（深入）”；
- 临时解法：监听
resize事件，用window.innerHeight和导航栏实际高度反推安全距离 - 更稳方案：改用
position: sticky+ 底部对齐（需父容器有高度约束），或用env(safe-area-inset-bottom)处理刘海屏+底部操作条 - 示例（适配 iPhone 底部安全区）：
.nav { padding-bottom: env(safe-area-inset-bottom); }，再配合margin-bottom主体内容
要不要用
inset替代bottom控制 fixed 位置可以，而且更现代。用
inset: auto auto 0 auto或简写inset-block-end: 0语义更清晰，也方便后续做逻辑扩展（比如在 RTL 模式下自动适配）。- 旧写法：
position: fixed; bottom: 0; - 新写法：
position: fixed; inset-inline-start: 0; inset-block-end: 0;（横向铺满、底部贴边） - 注意：IE 完全不支持
inset，如需兼容就别换；否则建议逐步迁移，尤其搭配env()使用时更易维护
实际项目里最容易漏的是动态高度适配和 iOS 视口抖动——写死像素值在开发机上看没问题，一上真机就错位。留空比盖住好，但留太多又浪费屏幕，得测真实设备。
- 加
