position: sticky 在表单页脚按钮上不可靠，因其依赖父容器可滚动且内容超高等条件，而短表单、ios safari、微信 webview 及软键盘弹出时均易失效；推荐用 fixed+padding、flexbox 布局或焦点监听 absolute 定位替代。
position: sticky 在表单页脚按钮上根本不可靠
直接给表单底部的 button 或 .footer-actions 加 position: sticky; bottom: 0;，在绝大多数真实场景中会失效——不是写法错，而是 sticky 的行为机制与“固定页脚按钮”需求天然冲突。
它要求：父容器必须有明确高度 + 可滚动 + 内容高度超过该高度，才能触发粘滞；而表单页脚按钮通常出现在内容较短、无滚动的页面里，或者父容器是 body 且未设 height: 100vh，此时 sticky 根本不激活。
- iOS Safari 15.4 之前完全忽略
bottom: 0，按钮始终按 normal 流渲染 - 微信 WebView 中，
position: sticky常退化为relative，按钮随内容滚动消失 - 软键盘弹出时，视口高度突变，sticky 锚点错乱，按钮卡在半空或跳回文档流位置
为什么不能把按钮直接塞进滚动容器里再 sticky
常见错误是把 .form-footer 放进 <main class="scrollable"></main> 内部，然后设 position: sticky; bottom: 0;。这看似合理，但实际导致两个问题：
- 按钮只能“粘”在该滚动容器的底部，而非整个视口底部——用户滚动到表单中间时，按钮就消失了
- 当表单内容少、滚动容器本身没溢出时，sticky 永远不会生效，按钮就躺在最底下不动，和普通块级元素没区别
- 若滚动容器用了
transform（比如某些框架的路由过渡动画），iOS Safari 会直接禁用 sticky
真正能用 sticky 的唯一可行结构
仅当你的表单页脚按钮需要“在长表单滚动过程中，始终吸附在视口底部”，且你愿意放弃对短表单的支持时，才可尝试以下结构：
html, body {
height: 100vh;
margin: 0;
}
.form-container {
height: 100vh;
overflow-y: auto;
}
.form-content {
min-height: calc(100vh - 60px); /* 预留按钮高度 */
}
.form-footer {
position: sticky;
bottom: 0;
background: white;
padding: 12px;
z-index: 10;
}
注意：.form-footer 必须是 .form-container 的**最后一个子元素**，且 .form-container 必须同时满足：height: 100vh、overflow-y: auto、内容总高度 > 100vh。缺一不可。
这个结构在桌面 Chrome 上可能勉强工作，但在 iOS Safari 和安卓低版本 WebView 中，仍大概率表现为按钮不吸附、或吸附后错位。
比 sticky 更稳的三个替代方案
面对表单页脚按钮，别硬刚 sticky。以下方案兼容性好、逻辑清晰、调试成本低：
- 用
position: fixed+bottom: 0，但必须加padding-bottom: 60px（按钮高度）到.form-content，防止内容被遮挡 - Flexbox 布局：
body { display: flex; flex-direction: column; min-height: 100vh; }，.form-content { flex: 1; }，.form-footer不设定位，自然沉底——内容短时到底部，内容长时随滚动到底，体验最自然 - 监听
focus事件，在输入框获得焦点时（键盘弹出），临时移除position: fixed并改用position: absolute; bottom: 0;，前提是父容器设了position: relative
真正难的不是让按钮“看起来在底部”，而是让它在各种视口变化（地址栏收放、键盘弹起、横竖屏切换）下保持可用。sticky 在这里既不轻量，也不可控——它的“粘”是被动的、依赖上下文的，而表单操作需要的是确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
