fixed底部导航栏盖住内容是因为其脱离文档流，主内容未预留空间；须用padding-bottom（非margin-bottom）撑开内容区域，并结合env(safe-area-inset-bottom)适配iphone安全区，且viewport必须设viewport-fit=cover。
fixed底部导航栏为什么总盖住内容
因为 position: fixed 元素完全脱离文档流，浏览器不会为它预留空间。主内容区域默认“不知道”下面有个 60px 高的导航栏，滚动到底部时自然就钻进去了——这不是 bug，是 fixed 的设计行为。
常见错误是给内容容器加 margin-bottom: 60px，这在多数情况下无效：margin 会折叠、不触发重排、且对 fixed 元素无感知。必须用 padding-bottom，它是内容区域内部的“留白”，能真实撑开可用高度。
- padding-bottom 作用于最外层内容容器（如
#app或main），别直接改body，避免影响全局样式 - 值要匹配导航栏实际高度（含内边距、border，不含 margin）
- 务必搭配
box-sizing: border-box，否则 padding 会让容器额外变高
如何适配 iPhone 底部安全区（刘海/圆角/手势条）
只写 padding-bottom: 60px 在 iPhone X 及之后机型上依然会被 Home Indicator 截断，因为系统要求内容离物理底边至少 env(safe-area-inset-bottom) 的距离（通常是 34px）。这个值不能硬编码，必须动态获取。
关键前提是：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在。缺了 viewport-fit=cover，env(safe-area-inset-bottom) 永远返回 0px，所有后续适配都失效。
- 正确写法（双保险兼容 iOS 11.0+）：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 如果还要加固定间距（比如导航栏本身高 60px，再加 8px 间隔），Safari 15.4+ 才支持
calc(60px + env(safe-area-inset-bottom))；旧版必须拆成两行：padding-bottom: 60px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); - 不要写
bottom: env(safe-area-inset-bottom)——env() 不能直接用于定位属性，只对padding和margin有效
软键盘弹出时底部间距错乱怎么办
iOS Safari 和微信 WebView 在软键盘弹出后，env(safe-area-inset-bottom) 不会自动更新，但视口高度会缩，导致原本留白的 padding-bottom 过大，内容被顶到屏幕中间。这不是 CSS 能解决的，得靠 JS 动态响应。
- 监听
focus/blur事件，在输入框聚焦时临时移除 padding，失焦时恢复 - 更可靠的是监听
visualViewport的resize事件：visualViewport.addEventListener('resize', () => { ... })，根据visualViewport.height变化反推是否键盘弹起 - 微信 WebView 早期版本不支持
visualViewport，需 UA 判断后 fallback 到window.innerHeight对比
flex 布局和 fixed 导航栏能不能混用
不能把 fixed 导航栏塞进 flex 容器里试图用 margin-top: auto 或 align-items: flex-end 推到底部——fixed 元素已不在 flex 上下文中，这些规则完全不生效。很多人踩坑在这里。
真正有效的组合是：flex 控制主体内容高度（比如 main { flex: 1; overflow-y: auto; }），fixed 单独抽离导航栏，两者通过 padding-bottom 配合。这样主体内容永远有明确高度边界，不会被 fixed 元素覆盖，也不依赖父容器高度约束。
复杂点在于：一旦引入 env() 和软键盘响应，padding 值就变成多状态变量（固定高度 + 安全区 + 键盘状态），建议用 CSS 自定义属性 + JS 切换 class 控制，而不是全靠 calc 堆叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
