应使用Flexbox实现视觉吸底且逻辑归属表单末尾的布局：外层容器设flex-column与min-height:100vh，主体内容区用flex:1撑满剩余空间，按钮作为直接子元素自然落于底部。
移动端吸底按钮不能用 position: fixed 硬钉在视口底部——键盘弹出时它会被顶走，语义上也脱离表单流，屏幕阅读器会跳过它。真正可靠的方案是让按钮“视觉吸底、逻辑在末尾”，靠 Flexbox 分配空间实现。
给外层容器设 flex-column + min-height: 100vh
这是高度链的起点，缺一不可：
-
html和body都必须设height: 100%，否则 Safari ≤15.3 和旧版 Chrome 会断掉高度传递 - 外层包裹容器（比如
.page或form）设display: flex; flex-direction: column; min-height: 100vh - 别用
height: 100vh——内容超长时会截断，min-height才能保滚动 - 如果用 Bootstrap，直接上
class="d-flex flex-column min-vh-100"更省事
让主体内容区用 flex: 1 撑开剩余空间
按钮要到底部，关键不是推它，而是把上面的内容“拉满”：
- 主体区域（如
.form-body或main）必须设flex: 1，不是flex-grow: 1 -
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，IE/Edge 16–18 下行为稳定 - 如果中间有多个区块（比如
header+section+footer），只对真正需要撑高的那个区域设flex: 1，别全加 - 不要给按钮容器加
flex-shrink: 0——它默认就是，加了反而干扰计算
按钮作为直接子元素放在容器末尾
结构松散或嵌套过深会导致 margin-auto 失效：
立即学习“前端免费学习笔记（深入）”；
- 按钮必须是 flex 容器的**直接子元素**，例如：
<form><div class="form-body">...</div><button>提交</button></form> - 避免套多一层
<div class="btn-wrapper">，否则margin-top: auto加在 button 上无效 - 如果非得封装按钮，就把
margin-top: auto加在.btn-wrapper上，但更推荐扁平结构 - 按钮水平居中用
justify-content: center（父容器需是 flex row），右对齐用margin-left: auto
兼容性与移动端细节
真正在手机上跑稳，还得绕过几个坑：
- iOS Safari 在键盘弹出时可能重绘异常，确保
body没有overflow: hidden或强制缩放 - 别用
100vh做按钮高度基准——某些 Android 浏览器里它包含地址栏高度，实际可视区域更小；改用rem或固定像素值（如56px） - 如果按钮文字长度不一导致水平错位，加
button { width: 100%; max-width: 120px; text-align: center; } - 跨行卡片网格里按钮底部对齐失效？那是正常行为，Flex 无法跨行联动高度；强需求就用 JS 扫描每行最大高，或换 CSS Grid
最易被忽略的是：Safari ≤15.3 对 minmax() 和某些 flex 组合有渲染 bug，如果你混用了 Grid 方案，务必单独测试该版本。真正的“吸底”，从来不是靠定位粘住，而是靠空间分配让它自然落位。
