用flexbox实现移动端底部导航的核心是让内容自动避让、导航自然落底，而非使用position: fixed；需将根容器设为flex column并用min-height: 100vh提供高度基准，main设flex: 1撑满剩余空间，底部导航设固定高度并用env(safe-area-inset-bottom)适配ios安全区，同时禁用flex-shrink防止压缩。
用 Flexbox 实现移动端底部导航，核心不是“固定它”，而是让内容自动避让、导航自然落底——既不遮文字，也不随滚动乱跑，还能适配 iOS 安全区和软键盘。
整体布局用 column flex + min-height: 100vh
把页面根容器（通常是 body 或一个外层 div.wrapper）设为 flex column，并确保它至少撑满整个视口：
-
html, body { height: 100%; margin: 0; }—— 清掉默认 margin，提供高度基准 -
body { display: flex; flex-direction: column; min-height: 100vh; }—— 推荐用min-height而非height，避免 iOS 键盘弹出时视口变化导致错位 -
<header></header><main></main><footer class="bottom-nav"></footer>—— 三者必须同级，都在 body 内，否则 flex 分配失效 -
main { flex: 1; }—— 主内容区域主动占满剩余空间，把底部导航“托”到底部
底部导航自身结构与等分逻辑
导航栏容器用 flex 水平铺开子项，但别直接写 flex: 1 —— Safari 对 button 内 flex 子项兼容性差，容易宽窄不一：
-
.bottom-nav { display: flex; height: 60px; padding-bottom: env(safe-area-inset-bottom); }—— 外层留安全区，内部高度固定 - 每个导航项（如
<a></a>或<button></button>）设：flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; - 图标建议用 inline SVG，避免 img 加载延迟引发布局抖动；文字统一加
white-space: nowrap防换行撑高 - 若用
<button></button>，需重置padding: 0; background: none; border: none;，否则各端默认样式不一致
避开 fixed 的坑：不脱离文档流才稳
不用 position: fixed 是关键。它会让导航脱离文档流，内容滚动时可能钻到导航下面，尤其在表单聚焦、软键盘弹起后更明显：
- Flex 布局下，
main的flex: 1会动态计算可用高度，天然避开底部区域 - iOS Safari 中，
env(safe-area-inset-bottom)会随键盘弹起自动变大，配合外层padding-bottom可让导航上浮留空，而不是被顶穿 - 不要在 JS 里监听
window.innerHeight来判断键盘状态——iOS 上该值在软键盘期间不可靠
header 和 footer 要防压缩
哪怕内容很长，页头页脚也不能被 flex “压扁”：
-
header, .bottom-nav { flex-shrink: 0; }—— 必须显式禁止收缩，否则含图片或复杂排版时高度异常 - 如果导航有内边距或边框，确认全局已设
box-sizing: border-box，否则可能意外触发滚动条 - 小屏下文字过长时，可用
font-size: clamp(14px, 4vw, 16px);控制字号，兼顾可读性与空间
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
