真正固定在底部的按钮必须用 position: fixed 并配齐三要素（position: fixed、bottom: 0、left: 0; right: 0），同时 body 设置 padding-bottom ≥ 按钮高度，并在 iPhone 上添加 padding-bottom: env(safe-area-inset-bottom) 和 viewport-fit=cover。
按钮要真正“固定在底部”，必须明确区分两种场景：一种是随内容滚动、仅在页面末尾才出现的“沉底页脚”，另一种是始终贴着视口最下方、不随滚动消失的“悬浮操作栏”。前者用 flex: 1，后者只能用 position: fixed；混用或误用 position: sticky 或 absolute 会导致遮挡、错位、iOS 键盘弹出后失位等问题。
用 position: fixed 实现真·视口底部悬浮
这是唯一能保证按钮始终显示在屏幕最下方、不随滚动消失的方式。但必须配齐三要素，缺一不可：
-
position: fixed—— 脱离文档流，锚定视口 -
bottom: 0—— 垂直定位基准 -
left: 0; right: 0—— 水平撑满（仅靠width: 100%在某些 WebView 中会失效）
常见错误：只写 bottom: 0 和 position: fixed，结果横屏时左右留白，或缩放后宽度不足。高度建议设为固定值（如 height: 56px），禁用 100vh 或百分比——Safari 地址栏收放会触发视口高度突变，导致按钮跳动。
为什么 padding-bottom 必须加在 body 上，而不是按钮容器上
position: fixed 元素完全脱离文档流，主内容区域对其“无感”。若不预留空间，滚动到底部时按钮就会盖住最后一段文字或表单控件。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：
body { padding-bottom: 56px; }（值 ≥ 按钮高度） - ❌ 错误做法：
.content { margin-bottom: 56px; }—— margin 会折叠，且无法撑开可用高度 - ⚠️ 注意：
padding-bottom必须作用于最外层容器（通常是body或根级 wrapper），且该容器需设box-sizing: border-box
若按钮高度动态变化（如多行文字），需 JS 监听 resize 或 focus（软键盘弹出时）动态更新 padding-bottom 值。
iPhone 安全区适配不能省略
在 iPhone X 及后续机型上，bottom: 0 会让按钮内容被 Home Indicator 裁切或压住，用户点不到最底下一行图标。
- 按钮容器上加：
padding-bottom: env(safe-area-inset-bottom); -
<meta name="viewport" content="viewport-fit=cover">必须存在，否则env()不生效 - 不要用
calc(56px + env(safe-area-inset-bottom))覆盖 height —— 高度仍保持固定，padding-bottom是额外安全留白 - 避免在该按钮内放
<input>或<textarea>，iOS 键盘弹起易触发布局重排，造成整体偏移
别踩 sticky 和 absolute 的坑
position: sticky 的 bottom: 0 在绝大多数浏览器中无效，Chrome/Safari 仍属实验性支持，移动端 WebView 基本忽略；position: absolute 则依赖父容器设 position: relative，否则按钮会上浮到最近定位祖先（可能是 html），且父容器高度会塌陷，小屏下卡片无法自适应。
- ❌
.card { position: relative; } .btn { position: absolute; bottom: 0; }—— 卡片高度塌陷，多列布局堆叠后按钮悬空 - ❌
.btn { position: sticky; bottom: 0; }—— 控制台无报错，但按钮不动或卡在顶部附近 - ✅ 局部卡片内按钮对齐，优先用
display: flex; flex-direction: column; justify-content: space-between或margin-top: auto
真正可靠的底部固定，只有 fixed 这一条路，但每一步都得踩准：三件套写全、padding-bottom 加对位置、env(safe-area-inset-bottom) 显式启用、高度固定不响应式。少一个环节，iOS 上就可能点不到按钮。
