直接用position: fixed会出问题，因其锚定原始视口，而iOS软键盘弹出会压缩visualViewport但不触发重绘，导致fixed元素错位、被顶出视口或随滚动消失；同时它脱离文档流，破坏高度计算与无障碍访问。
为什么直接用 position: fixed 会出问题
菜单贴底后，iOS 软键盘一弹，fixed 元素常被顶出视口、错位或消失；内容滚动时文字可能钻到菜单下面；屏幕阅读器会跳过它，破坏无障碍访问。根本原因是 position: fixed 让元素脱离文档流，不再参与高度计算，justify-content: space-around 也因父容器缺显式宽高而失效。
flex-direction: column 布局必须设的三个前提
Flex 布局不是套上就生效，漏掉任一条件都会导致菜单浮在半空：
-
html和body都要加min-height: 100vh（不用height: 100vh，防 iOS 地址栏缩放截断） -
body的默认margin（通常是 8px）必须清零，否则 flex 容器实际可用高度少一截 - 根容器（比如
<div class="app">）才设display: flex; flex-direction: column;，别直接套在body上——DOM 层级和重置必须到位
flex: 1 和 margin-top: auto 到底选哪个
两者都能把菜单“推”下去，但行为差异明显：
-
flex: 1让主体内容真正占满剩余空间，滚动时高度稳定，不会因动态加载或内容变化突然失位 -
margin-top: auto在内容超长或异步渲染后容易计算偏移，尤其在 iOS Safari 中偶发菜单上浮 - 别写
flex-grow: 1—— 虽等价，但flex: 1是简写，更少出错；也别给菜单容器加flex-shrink: 0以外的弹性属性，小屏下易被压缩变形
让 justify-content: space-around 正常工作的硬性条件
这个属性不是“自动均分”，它需要明确的主轴尺寸基准：
立即学习“前端免费学习笔记（深入）”；
- 底部菜单容器必须设显式
height（如height: 60px），否则space-around缺少垂直方向的分配依据 - 菜单项统一用
flex: 0 0 auto，防止被 flex 算法压缩；文字用text-align: center居中，别依赖space-around拉齐文字 - 别混用
margin：子项加margin-left/right会干扰间距分配，右侧可能多一倍空白
真正难的不是写几行 CSS，而是理解 flex 布局里「高度参考」和「文档流归属」这两个隐性约束——它们不报错，但会让菜单在某个 iOS 版本或某个微信 WebView 里突然失效。
