应给主体内容（如main）设置margin-bottom等于导航栏高度；优先用CSS变量动态管理，避免body padding-bottom；移动端需结合env(safe-area-inset-bottom)和resize监听适配iOS视口变化。
底部导航栏用 position: fixed 后内容被遮住怎么办
直接原因是：fixed 元素脱离文档流，不占空间，后续内容会“上浮”到它原本的位置，导致被覆盖。不是样式没生效，而是布局逻辑本身如此。
最稳妥的做法是给主体内容预留出底部导航栏的高度空间。关键不是“选 margin 还是 padding”，而是“加在谁身上、加多少、是否动态适配”。
-
加
margin-bottom到主体容器（如<main>或<div class="content">）：适合内容高度固定或可预估的场景；值必须严格等于导航栏高度（例如60px） -
加
padding-bottom到<body>或根容器：更常用，尤其当导航栏始终存在且高度不变；但注意如果页面有滚动条，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 可能偏大或偏小。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：监听
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 视口抖动——写死像素值在开发机上看没问题，一上真机就错位。留空比盖住好，但留太多又浪费屏幕，得测真实设备。
