不能只用flex将底部导航塞进column容器，因导航会随内容滚动而非固定视口底端，且无法规避软键盘弹出导致的视口重算问题；需结合flex撑主体与fixed锚定位置，并用padding-bottom替代margin-bottom、抽离fixed元素出flex流。
为什么不能只用 flex 把底部导航塞进 column 容器里
很多人一上来就给 body 设 display: flex; flex-direction: column;，再把导航栏作为最后一个子元素放进去，指望它自动“沉底”。这在内容高度不足时看似有效，但一旦页面可滚动，导航就会跟着内容一起滚走——它根本没固定在 viewport 底部，只是被 flex 排到了容器末尾而已。
更关键的是：这种写法会让导航栏参与文档流，无法真正规避软键盘弹出时的视口重算问题。iOS Safari 在键盘收起后常不触发重排，导航就卡在半空。
所以，flex 和 position: fixed 不是互斥方案，而是分工协作：flex 控制主体内容高度，fixed 负责锚定位置。
怎么让 flex 主体撑满、fixed 导航不遮挡内容
核心是「padding-bottom 替代 margin-bottom」+「fixed 元素抽离出 flex 流」：
-
html和body都设min-height: 100vh;，不依赖height: 100%;（iOS 对 height 继承不稳） - 主内容区域（如
<main></main>）设flex: 1; overflow-y: auto;，确保可滚动且占满剩余空间 - 底部导航栏单独写在
body下，和<main></main>平级，加position: fixed; bottom: 0; left: 0; right: 0; -
body加padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));，其中--nav-height: 60px;是自定义属性，方便统一维护 - 避免在导航内放
<input>或<textarea></textarea>—— iOS Safari 会因输入框聚焦导致 fixed 错位
env(safe-area-inset-bottom) 怎么写才不炸
直接写 padding-bottom: env(safe-area-inset-bottom); 在安卓或旧 iOS 上会失效（返回 0），必须带 fallback：
- 用双声明：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 配套的
<meta>标签不能少：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 别把
env()套在height或max-height里——它只对padding、margin、top/bottom等布局属性生效 - 测试时务必真机连 Safari 开发者工具，模拟器对
env()支持不准
导航项等分又不被 Safari 拉宽怎么办
在 fixed 导航容器里用 display: flex; 做等分，Safari（尤其 iOS 16 以下）对 flex: 1 的子项处理异常，文字长的项会撑开整个导航栏宽度。
安全写法是：
- 导航容器设
display: flex; justify-content: space-around;（不是space-between，后者两端不留白） - 每个导航项（如
<button></button>）设flex: 1 1 0; min-width: 0;，强制收缩基线为 0 - 内部图标+文字用
display: flex; flex-direction: column; align-items: center;，避免文字换行错位 - 禁用
button默认padding和border，否则各端热区不一致
最易忽略的一点：所有导航项必须用相同 HTML 结构，哪怕某项暂时没图标，也要留空 <span class="icon"></span> 占位，否则 flex 计算会失衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
