position: fixed 是最直接但最危险的写法，iOS Safari 地址栏伸缩会导致跳动或消失，安卓 WebView 软键盘弹出会顶出视口；需配套 viewport-fit=cover、padding-bottom: env(safe-area-inset-bottom) 及正文预留空间。
position: fixed 是最直接但最危险的写法
直接给 footer 或 nav 加 position: fixed; bottom: 0; 确实能“看起来固定”，但在真实移动设备上会出问题：iOS Safari 滚动时地址栏伸缩，导航栏跟着跳动甚至消失；安卓 WebView 里软键盘弹出后，bottom: 0 可能被顶到视口外。这不是 bug，是浏览器对 fixed 元素在 viewport 变化时的合法重定位。
必须配套三件事：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 否则 iPhone X+ 安全区会被裁掉 - 导航容器加
padding-bottom: env(safe-area-inset-bottom);—— 防止 Home Indicator 遮住按钮 - 正文区域必须预留空间：比如导航高 56px，就给
main或body加padding-bottom: 56px，不能只靠 margin
flex 布局才是移动端底部导航的稳妥选择
用 display: flex; flex-direction: column; 把整个页面当容器，让内容区占满剩余高度，底部自然“贴底不浮动”。它不依赖 viewport 行为，不会被键盘或地址栏干扰，兼容性也比 grid 更广（IE11 都能跑）。
关键结构和样式：
立即学习“前端免费学习笔记（深入）”；
<body style="display: flex; flex-direction: column; min-height: 100vh;"> <main style="flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;">...</main> <footer style="height: 56px;">...</footer> </body>
注意点：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
main必须设overflow-y: auto，否则内容超长时无法滚动 - 加上
-webkit-overflow-scrolling: touch才有 iOS 流畅回弹 - 不要给
body设overflow: hidden—— 这会让 iOS 键盘弹出时布局错乱 - 如果页脚需要“始终在视口底”（而非随内容撑开），那还是得切回 fixed，但要用 JS 监听
resize和focusin动态调整高度
Vue/React 项目里底部导航容易闪动？问题不在 CSS
框架组件重渲染、路由切换、甚至 aria-current 属性变化，都可能触发 layout shift，导致 fixed 导航短暂偏移。这不是样式没写对，而是 DOM 更新时机和浏览器重排节奏不一致。
真正有效的隔离手段：
- 把底部导航抽成独立组件，用
position: fixed+z-index: 9999，并加will-change: transform提前提示合成层 - 避免在导航内部做条件渲染（比如根据路由动态增删 tab），改用
visibility: hidden+aria-hidden控制显示 - 禁用父容器的
transform或filter—— 它们会创建新的层叠上下文，让z-index失效 - 如果用 Vue Router，别在
<router-view></router-view>外层套transition，动画会拖慢 DOM 更新，放大闪动
主流框架怎么处理？Vant / Ant Design Mobile / Naive UI 的共性
这些库底层都绕开了纯 fixed 方案。Vant 的 Tabbar 默认用 flex + padding-bottom；Ant Design Mobile 的 TabBar 在 iOS 上自动注入 env(safe-area-inset-bottom)；Naive UI 则直接要求你传入 safeAreaInsetBottom prop 来控制内边距。
它们不约而同做了三件事：
- 结构语义化：用
<nav aria-label="底部导航"></nav>包裹，每个 tab 是<button></button>而非<a></a>（避免服务端跳转打断 SPA） - 激活态用
aria-current="page"，不用 class 名判断当前项 - 图标强制用内联
<svg></svg>，不依赖字体图标（iOS 字体加载失败会导致图标空白）
真正难的不是“怎么固定”，而是“怎么让它在键盘弹出、横屏旋转、深色模式切换、无障碍朗读所有场景下都不出错”。这些细节，光看文档容易漏，得真机连着 Safari Web Inspector 调一次才明白。
