唯一可靠方案是position: fixed + bottom: 0 + left: 0 + right: 0 + 固定height + body padding-bottom，必须配合viewport-fit=cover和width=device-width、initial-scale=1.0，且需处理iOS键盘弹出导致的错位问题。
直接结论：用 position: fixed + bottom: 0 + padding-bottom 是唯一可靠方案，但必须配合 viewport 设置和移动端键盘兼容处理，否则 iOS 上一弹键盘就错位。
viewport 必须写对，否则 fixed 底部条在手机上根本“固定”不住
很多页面在 PC 上看着正常，一上真机就发现底部条飘到中间或被截断——根本原因是没加或写错了 <meta name="viewport">。手机浏览器默认按 980px 渲染，不加这个标签，position: fixed 的计算基准就错乱了。
-
width=device-width和initial-scale=1.0缺一不可；漏掉后者，iPhone 上文字会小得看不清 - 别写
user-scalable=no，除非你确认过中老年用户投诉流程已闭环 - 这个
<meta>标签必须放在<head>最前面，不能在<link rel="stylesheet">后面，否则部分 Android WebView 会先闪一下默认宽度再重排
fixed 底部条的三件套写法和 padding-bottom 的坑
只写 position: fixed; bottom: 0 不够，必须补全三件套，并同步处理内容遮挡问题：
- 底部条本身要写全：
position: fixed; bottom: 0; left: 0; right: 0—— 少一个，比如漏掉right: 0，在某些安卓机型上会右侧留白 -
body或main必须加padding-bottom，值至少等于底部条高度（如56px），否则滚动到底部时最后一段内容永远被盖住 - 高度建议用固定值（
56px、60px），别用100vh或百分比 —— Safari 地址栏收放时，vh值会跳变，导致底部条瞬间上移或下坠
iOS 键盘弹出后底部条错位怎么办
这是最常被忽略的兼容点：iOS Safari 在软键盘弹出时，视口高度突变，fixed 元素会卡在旧位置不动，看起来像“粘住”或“消失”。这不是 bug，是行为预期。
立即学习“前端免费学习笔记（深入）”；
- 避免在底部条内部放
<input>或<textarea>—— 真要放，得监听focusin/focusout，临时把底部条display: none，失焦后再恢复 - 不要依赖
window.innerHeight动态重设底部条位置 —— 它在键盘弹出期间返回的是错误值，且触发时机不可靠 - 如果底部条只是导航类（如 tabbar），建议用原生 App 风格：点击跳转，不内嵌表单；需要表单操作的，另起全屏页或 modal
别误用 position: absolute 替代 fixed
有人想“省事”，给父容器加 position: relative，再对子元素用 position: absolute; bottom: 0。这在局部卡片里可行，但做全局底部悬浮条时必然失败：
- 父容器不是
body，而是某个<div class="page">，一旦内容高度不足，绝对定位元素会贴在父容器底边，而不是视口底边 - 滚动时它不会跟着动，视觉上就是“悬在半空”
- 响应式切换列数时（比如从两栏变单栏），它的
bottom值完全无法预测，维护成本爆炸
真正难的不是写那几行 CSS，而是把 viewport、fixed 行为、键盘生命周期、以及内容区域的 padding 预留这四件事串成一条链——漏掉任何一环，用户在真机上滑两下就会发现问题。
