position: sticky + bottom: 0 在垂直滚动中无效，因 CSS 规范仅支持其在水平滚动时生效；可靠方案是 flex 布局结合 min-height: 100vh、display: flex/column、主内容区 flex: 1 及底部工具栏自然定位。
为什么position: sticky + bottom: 0 在底部工具栏上基本不能用
这不是兼容性补丁能解决的问题，而是 CSS 规范本身限制：position: sticky 的 bottom 值只在水平滚动（overflow-x: scroll）时生效；垂直滚动时，浏览器直接忽略它，降级为 static。即使你在 Safari 16+ 看到它“偶尔动了”，也是未定义行为，上线后大概率失效。
常见错误现象：
- 工具栏始终停在初始位置不动，滚动后消失或错位
- Computed Styles 里
position显示为static而非sticky - 父容器加了
transform、filter或overflow: hidden，直接禁用 sticky 行为
用 flex 布局撑满视口并锁定底部工具栏
这是目前最稳定、兼容性最好（IE11+ 支持）、语义清晰的方案。核心是让容器占满视口高度，主内容区自动伸缩，工具栏自然落底。
关键实操点：
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
.page或<body>包裹层）设min-height: 100vh（不用height: 100vh，防内容超长被截断） - 容器加
display: flex和flex-direction: column - 主内容区（如
.main-content）加flex: 1，吃掉所有剩余空间；若需内部滚动，再加overflow-y: auto - 工具栏（如
.bottom-toolbar）放在最后，不设flex，默认占据自身高度；若需固定高（如 60px），加flex-shrink: 0防压缩
示例片段：
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
overflow-y: auto;
}
.bottom-toolbar {
flex-shrink: 0;
height: 60px;
}
position: fixed 工具栏遮挡内容怎么办
Fixed 定位脱离文档流，最常导致底部按钮、表单提交区被盖住——这不是工具栏“太霸道”，而是页面没预留空间。
解决方法不是调 z-index，而是告诉页面：“你下面有块固定区域，别往上挤”：
- 在
<body>或主容器上加padding-bottom: 60px（值 = 工具栏高度） - 若工具栏高度不固定（比如随
rem缩放），改用min-height: calc(100vh - 60px)控制主内容区最小高度 - iOS Safari 键盘弹出时可能不重算 viewport 高度，此时需监听
resize事件动态更新padding-bottom - 工具栏本身加
width: 100vw（不是100%），避免父容器内边距干扰宽度
工具栏内部按钮对齐与响应式适配要点
工具栏本身定位稳了，内部按钮排布容易踩坑：等宽分布失败、右对齐偏移、小屏换行误触。
实操建议：
- 按钮组父容器必须设
width: 100vw或确保父级无max-width限制 - 等宽按钮用
flex: 1，右对齐用margin-left: auto，别依赖text-align: right - 含图标+文字的按钮加
white-space: nowrap，防换行破坏布局 - 小屏上禁用
flex-wrap: wrap——工具栏是紧凑操作区，换行反而增加误触风险 - 触控热区至少
min-height: 48px，iOS 建议min-height: 60px并配合padding保证点击面积
真正难的不是写几行 CSS，而是判断该用 fixed 还是 flex：前者适合全局常驻（如音乐播放控制条），后者更适合页面级、内容驱动的底部操作（如表单提交、评论工具栏）。选错方案，后面所有适配都是徒劳。
