position: sticky + bottom: 0 在垂直滚动中无效，因 CSS 规范仅支持其在水平滚动时生效；可靠方案是 flex 或 grid 布局结合视口高度控制，如 min-height: 100vh + display: flex/column + flex: 1 主内容区 + 底部工具栏自然定位。
直接用 position: sticky 实现底部工具栏，在绝大多数场景下会失效——它不支持 bottom: 0 在滚动时“粘底”，iOS Safari 直到 15.4 才开始实验性支持，且行为不稳定。真正可靠的做法是组合 display: flex 或 display: grid + 视口高度控制。
为什么 position: sticky + bottom: 0 不行
这不是浏览器兼容性问题，而是 CSS 规范限制：position: sticky 的 bottom 值仅在**水平滚动**（overflow-x: scroll）时生效；垂直滚动时，bottom 被忽略，浏览器静默降级为 static。即使你在 Safari 16+ 看到它偶尔起作用，也是未定义行为，不能依赖。
- 检查 computed 样式里
position是否还是sticky，还是已变成static - 父容器若含
transform、filter、overflow: hidden，会直接禁用 sticky -
body默认不是合法的 sticky 容器，且自身不触发垂直滚动上下文
用 flex 布局撑满视口并锁定底部
核心思路：让页面容器占满视口，主内容区自适应伸缩，工具栏固定在最后一行底部。
- 根容器（如
<body>或包裹层）设min-height: 100vh（不用height: 100vh，防内容超长时截断） - 容器设
display: flex+flex-direction: column - 主内容区加
flex: 1，吃掉所有剩余空间 - 工具栏放在最后，不设
flex，自然落在底部 - 若工具栏需固定高度（如 60px），可加
flex-shrink: 0防被压缩
示例结构：
立即学习“前端免费学习笔记（深入）”；
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
<p>.main-content {
flex: 1;
overflow-y: auto; /<em> 允许内部滚动，不影响工具栏位置 </em>/
}</p><p>.bottom-toolbar {
flex-shrink: 0;
height: 60px;
background: #fff;
border-top: 1px solid #eee;
}用 grid 模板明确分配底部轨道
比 flex 更精确控制行高，尤其适合工具栏高度动态变化（比如响应字号缩放）的场景。
- 容器设
min-height: 100vh+display: grid -
grid-template-rows: 1fr auto——1fr吃剩余空间，auto包住工具栏自身高度 - 确保工具栏元素位于第二行（如用
grid-row: 2，或按 DOM 顺序写在最后） - 若工具栏内有可折叠内容，改用
grid-template-rows: minmax(0, 1fr) auto，允许第一行收缩到 0
注意：1fr 会尊重子项的 min-height，可能导致高度溢出；minmax(0, 1fr) 才真正允许压缩。
移动端触控与 iOS 适配关键点
工具栏在真机上“被顶起”或“键盘弹出后消失”，往往不是布局问题，而是 viewport 和交互层干扰。
- 工具栏最小触控高度建议
min-height: 48px（符合 WCAG 可访问性标准） - iOS Safari 键盘弹出时，
100vh仍包含地址栏高度，导致计算偏大；可用100dvh替代（Chrome/Edge/Safari 16.4+ 支持，旧版 fallback 到100vh） - 避免给工具栏或其父级加
transform: translateZ(0)—— 这会创建新层叠上下文，干扰 iOS 的滚动合成 - 如果工具栏内含图标文字组合，加
white-space: nowrap防换行破坏等宽分布
最易被忽略的是：工具栏本身不参与滚动，但它的存在必须被主内容区“感知”。要么靠 padding-bottom（fixed 定位时），要么靠 flex/grid 的空间分配逻辑——选哪条路，取决于你是否需要工具栏脱离文档流。
