fixed 定位是移动端底部导航栏唯一可靠方案，需同时设置 bottom: 0、left: 0、right: 0 并用固定高度；主内容容器必须设 padding-bottom（含安全区适配），且导航栏内禁止放置表单控件。
position: fixed 是唯一靠谱的选择，别试 sticky，它在 iOS Safari 和微信 WebView 里基本不工作。
必须加 bottom: 0 + left: 0 + right: 0
只写 bottom: 0 不够。移动端缩放、横屏或某些安卓 WebView 下，导航栏会左右漏边甚至偏移。三者缺一不可：
-
bottom: 0锚定视口底边 -
left: 0和right: 0共同撑满宽度，比width: 100%更稳 - 高度必须用固定值（如
height: 56px），别用100vh或百分比——Safari 地址栏收放时会跳变
正文内容别被遮住：padding-bottom 要算准
fixed 元素脱离文档流，主内容默认不“知道”下面有导航栏。直接加 margin-bottom 不行，容易折叠或失效；必须用 padding-bottom：
- 基础值 = 导航栏高度，比如
padding-bottom: 56px - iPhone X 及以上需叠加安全区：
padding-bottom: calc(56px + env(safe-area-inset-bottom)) - 推荐用 CSS 变量统一管理：
--nav-height: 56px，然后写padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)) - 这个
padding-bottom必须加在**主内容容器上**（比如<main></main>），不是
别让输入框毁掉整个布局
iOS Safari 中，input 或 textarea 获焦弹出软键盘后，fixed 导航栏常错位、上浮甚至消失。关键规避点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 导航栏内部**禁止放任何表单控件**（包括
input、select） -
上不能设overflow: hidden，否则键盘弹出时布局重排异常 - 如果页面必须有搜索框，把它放在顶部导航栏里，或用 JS 监听
focus/blur动态调整导航栏z-index或临时隐藏 - 微信 WebView 中，UA 判断是兜底手段：
navigator.userAgent.includes("MicroMessenger")，可加 class 降级处理
图标+文字等宽布局用 display: flex 最省心
导航项横向排列，靠 flex: 1 均分空间，比浮动或 inline-block 稳定得多：
- 父容器设
display: flex，子项统一flex: 1，再用text-align: center居中文本和图标 - 别给子项同时设
flex: 1和width——Safari 会计算异常，宽度错乱 - 图标建议用 SVG 或
background-image，避免<img alt="HTML移动端怎么布局底部固定导航栏" >加载失败导致高度塌陷 - 如果支持国际化，
<nav></nav>语义化包裹比<div> 更利于屏幕阅读器识别 <p>最易被忽略的其实是 <code>env(safe-area-inset-bottom)的 fallback：iOS 11.2 以下不支持，得用 JS 检测并补上固定值；还有微信 WebView 对viewport-fit=cover的兼容性波动——这些细节不处理，上线后第一台 iPhone 就可能露馅。
