最稳方案是用flex布局替代fixed：根容器设display: flex; flex-direction: column; min-height: 100dvh，主内容区flex: 1，底部栏作为同级兄弟元素靠margin-top: auto沉底，避免脱离文档流导致的遮挡与键盘错位。
直接用 position: fixed 做底部固定栏，在移动端大概率会遮内容、错位、软键盘弹出后失灵——这不是你代码写错了，是 fixed 本身在动态视口里不可靠。真正稳的方案是 flex 布局撑高主体 + 外部留白或内部 flex 沉底，两种路径都得避开常见陷阱。
为什么 flex: 1 在底部栏上不生效？
因为 flex: 1 只对弹性容器的**直接子元素**起作用，且父容器必须有明确高度约束。常见失效场景：
- 父容器（如
body或根div）没设min-height: 100dvh或height: 100vh，flex: 1就“没空间可伸” - 把
flex: 1写在底部栏自己身上——它该是固定高度，撑高任务应交给它的兄弟容器（比如主内容区） - iOS Safari 中
100vh包含地址栏，实际可视高度更小；优先用100dvh，不支持时 fallback 到 JS 动态设置min-height
底部栏该放进 flex 容器里，还是抽成 fixed 兄弟元素？
取决于你是否需要它随软键盘收起/弹出自动避让。两个方案不能混用，选错就全乱：
-
纯 flex 方案（推荐用于无输入框的导航栏）：底部栏和主内容同级，都在一个
display: flex; flex-direction: column的根容器内；主内容用flex: 1，底部栏设固定height并靠margin-top: auto沉底 -
flex + fixed 混合方案（适合带搜索入口的底部栏）：底部栏从 flex 容器中抽离，作为
body的直接子元素，用position: fixed; bottom: 0；同时主容器（如.page）加padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom))预留空间 - 别把
fixed栏塞进 flex 容器内部——它已脱离文档流，flex 规则对它无效，反而导致 padding/margin 计算错乱
怎样让底部栏里的按钮等宽又不被文字撑开？
用 justify-content: space-around 前，必须确保父容器是 display: flex 且宽度可控；否则 Safari 会按文字长度分配空间，视觉严重不均：
- 按钮容器设
display: flex; justify-content: space-around，每个按钮用flex: 1 1 0; min-width: 0（不是flex: 1） - 避免给按钮加
width: 25%这类硬编码——不同机型安全区不同，百分比会偏移 - 图标统一用
inline SVG或字体图标，不用 - 微信 WebView 对
gap支持差，Android 4.4 以下不认gap，可用margin-inline-start: auto替代首项前距
最易被忽略的一点：无论选哪种方案，env(safe-area-inset-bottom) 必须参与计算——iPhone X 及之后机型底部有黑条，不加这个，导航栏一半会被系统遮住；但也不能只靠它，得和自定义高度变量一起用 calc()，否则横屏或键盘弹出时依然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
