position: fixed底部导航盖住内容是因其脱离文档流，主内容无法感知；须用padding-bottom+env(safe-area-inset-bottom)动态预留空间，并配viewport-fit=cover、统一css变量及键盘焦点监听。
直接用 position: fixed 是最简路径，但不处理安全区和内容遮挡，它一定会盖住页面最后一段文字——这不是 bug，是 CSS 的必然行为。
为什么 fixed 底部导航总盖住内容？
因为 position: fixed 元素完全脱离文档流，主内容渲染时“看不见”它。文字、按钮、表单会自然延伸到导航栏下方，尤其在 iOS Safari 或微信 WebView 中更明显。
-
margin-bottom在 flex/grid 布局中容易被折叠或失效，优先用padding-bottom - 值必须匹配导航栏真实高度（含
padding、border），不能只写死60px - 若导航栏用了
box-sizing: content-box（默认），设height: 60px+padding: 12px后实际高为84px，会进一步加剧遮挡
如何正确预留底部安全间距？
关键不是加个固定值，而是适配不同设备的动态视口和安全区。
- 在
中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)不生效 - 定义统一变量：
:root { --nav-height: 60px; }，再写main { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); } - Android 旧版本忽略
env()会 fallback 为0，无副作用；iOS 返回约34px（iPhone X+ 手势条区域） - 绝对不要在
body上设padding-bottom——会影响scrollHeight和IntersectionObserver判断
fixed 导航栏为何在 iOS 键盘弹起后错位？
iOS Safari 对 position: fixed 的重排支持不完整：软键盘弹出/收起时，视口尺寸变了，但 fixed 元素坐标卡在旧位置，导致“上浮”或“被顶起”。
- 绝对不要在导航栏内部放
<input>或<textarea></textarea>——这会强制重排视口，加剧错位 - 对所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 微信 WebView 中需 UA 判断兜底，部分版本对
env()支持不稳定 - 避免用
transform或filter包裹导航父容器——会隐式创建层叠上下文，导致z-index失效
真正难的不是把导航“钉”到底部，而是让它的高度、安全区留白、键盘交互、跨端兼容全部同步生效——这几个点只要漏一个，用户就会遇到点击失灵、文字被盖、滚动错位等问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
