最快速且兼容性最稳的方案是用position: fixed加flex布局内部导航项，但必须处理内容遮挡、安全区适配和点击热区问题；导航栏须为body直接子元素、与主容器平级，主容器设padding-bottom而非margin-bottom，值为calc(var(--nav-height) + env(safe-area-inset-bottom))，禁用100vh而改用100dvh或JS回退，导航项需flex: 1 1 0、min-width: 0并包裹button确保44×44px热区。
直接用 position: fixed 加 flex 布局内部导航项，是最快速且兼容性最稳的方案；但必须同步处理内容遮挡、安全区适配和点击热区问题，否则在 iOS Safari 或微信 WebView 中必出错。
为什么不能把导航栏塞进 flex column 容器里
很多人试图把整个页面设成 display: flex; flex-direction: column，再把导航栏作为最后一个子元素。这在内容少时看似可行，但一旦导航栏用了 position: fixed，它就彻底脱离文档流——flex 容器根本“看不见”它，自然无法预留空间。结果就是主内容上浮、被遮盖，尤其软键盘弹起后收不回去。
- 导航栏必须是
body的直接子元素，与主容器平级，靠z-index和position: fixed提层 - 主容器（如
.main）要加padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom))，不是margin-bottom -
100vh在 iOS 上不可靠（含地址栏），别用它做高度基准；改用min-height: 100dvh（如支持）或回退到100vh+ JS 修正
导航项等分失效？检查 flex 写法和 min-width
Safari 对 flex: 1 的解析在 button 或 a 内部不稳定，文字长短不一还会撑开宽度，导致视觉不等宽。单纯设 justify-content: space-around 也不够——它只管间距，不管子项自身宽度。
- 导航项容器用
display: flex，每个子项写全flex: 1 1 0，不要简写为flex: 1 - 每个子项必须加
min-width: 0，否则 Safari 会按文字内容撑宽，破坏等分 - 图标+文字垂直居中：子项设
display: flex; flex-direction: column; align-items: center;，别依赖text-align - 避免用
img做图标——加载延迟会导致布局抖动；改用 inline SVG 或字体图标
软键盘弹起后导航栏上浮或压缩？别监听 resize
iOS Safari 的 window.innerHeight 在软键盘弹出时会错误地变小，监听它做动态调整大概率失败。微信 WebView 更糟，visualViewport 支持也不完整。
- 核心解法是纯 CSS：
.bottom-nav外层容器加padding-bottom: env(safe-area-inset-bottom)，内部用固定height: 60px - 如果导航栏里有搜索框，
focus后调用scrollIntoView({ behavior: 'smooth', block: 'nearest' })必须放在setTimeout(() => {}, 0)或Promise.resolve().then()里，否则 iOS 滚动会不到位 - 微信 WebView 中
env(safe-area-inset-bottom)可能返回0，需 UA 判断后 fallback 到constant(safe-area-inset-bottom)
真正容易被忽略的是：导航项的点击热区必须 ≥ 44×44px，且要包裹在 button 或带 role="button" 的元素里。仅靠 div + click 事件，在触屏设备上响应迟钝、可访问性不达标，还可能被 iOS 的 click 延迟机制拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
