position: fixed 不是 Sticky Footer 解法，因其使页脚脱离文档流而覆盖内容；position: sticky 也不适用，因它依赖滚动触发而非布局占位；正确解法是 Flexbox：html 和 body 均设 height: 100%，body 设 display: flex、flex-direction: column、min-height: 100vh，主内容区用 flex: 1，footer 保持流式位置。
为什么 position: fixed 不是 Sticky Footer 的解法
它会让 footer 脱离文档流，直接覆盖在 .contact-in 或其他内容上——尤其在表单、地图、长文本区域里，用户根本点不到底部按钮或看不到完整信息。这不是“粘底”，是“遮底”。position: sticky 同样不行：它依赖父容器滚动触发，而页脚需要的是布局占位能力（内容少时压底、内容多时随流下移），语义和行为完全错配。
html 和 body 必须设 height: 100%
否则 min-height: 100vh 在旧版 Chrome/Edge 中会失效，导致整个 flex 布局塌缩，页脚浮在内容末尾上方。这不是可选优化，是硬性前提：
-
html和body都要加height: 100%（缺一不可） -
body设display: flex; flex-direction: column; min-height: 100vh - 别用
%替代vh——嵌套百分比高度在部分场景下会计算为 0
主内容区必须用 flex: 1，不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，而 flex-grow: 1 单独使用时，在 IE/Edge 16–18 中行为不一致，可能导致页脚错位或高度塌陷。关键细节：
- 给
main或包裹内容的容器（如.page-main）加flex: 1 - 不要给
footer加flex-shrink: 0——它默认就是，加了反而可能干扰高度计算 - 如果页脚高度动态变化（比如响应式文字缩放），
flex: 1能自动重排，容错率远高于 JS 补丁
Safari 15.4 之前别碰 Grid 方案中的 minmax()
虽然 Grid 写法更短（grid-template-rows: auto minmax(0, 1fr) auto），但 Safari ≤15.3 对 minmax(0, 1fr) 有渲染 bug，页脚可能直接消失或溢出视口。Flexbox 没这个问题，且所有现代浏览器包括 iOS Safari 12+ 都能稳定支持。如果你的项目仍需兼容 Safari 15.3 及更早版本，Grid 就不是“更简洁”，而是“埋雷”——那个 minmax() 细节太容易被当成可选优化而忽略，排查成本却极高。
立即学习“前端免费学习笔记（深入）”；
