Flexbox是实现Sticky Footer最可靠的方式：需设html/body高度基准、清空body margin、用flex容器包裹并设min-height:100vh、main用flex:1、footer不加flex-shrink:0，禁用position:sticky。
Flexbox 是目前实现粘性页脚（Sticky Footer）最可靠、浏览器兼容性最好、逻辑最清晰的方式。只要高度链完整、flex 分配明确，就能稳住页脚：内容少时贴底，内容多时随流下移，不遮挡、不悬空、不依赖 JS。
html 和 body 必须设 height: 100%
漏掉这一步，min-height: 100vh 在旧版 Chrome/Edge/Safari 中会失效，页脚直接塌缩到内容末尾上方。不能只设 body 或只设 html ——必须两者都加 height: 100%，且清除 body 默认的 margin，否则会撑出额外空白。
html { height: 100%; }body { height: 100%; margin: 0; }- 别用
min-height: 100%替代height: 100%——后者是高度链传递的必要前提
外层容器要用 display: flex + flex-direction: column + min-height: 100vh
不能直接对 body 设 display: flex 就完事。部分 Safari 版本（尤其是 ≤15.3）不支持对 body 的 flex 布局，推荐套一层语义化容器（如 <div class="page">）更稳妥。
- 容器必须设
display: flex; flex-direction: column; - 必须用
min-height: 100vh，不是height: 100vh——后者会截断长内容 - 如果用 Bootstrap，可用
class="d-flex flex-column min-vh-100"替代手写样式
main 区域必须用 flex: 1，不是 flex-grow: 1
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，它能确保内容区真正“抢占”剩余空间；而单独写 flex-grow: 1 在 IE/Edge 16–18 下行为不一致，可能导致页脚上浮或错位。
立即学习“前端免费学习笔记（深入）”；
-
<main class="flex-fill">（Bootstrap 5 内置）等价于flex: 1 - 不要给
footer加flex-shrink: 0——它默认就是，加了反而可能干扰高度计算 - 如果中间有多个区块（如
<section>），统一用flex: 1控制主体区域，别依赖margin-top: auto
别碰 position: sticky 实现 Sticky Footer
position: sticky 的语义和行为完全不匹配 Sticky Footer 的需求：它需要滚动触发“进入视口”，而 footer 天然就在 DOM 末尾，一加载就在视口底部，浏览器多数时候直接降级为 static，你根本看不出效果。
- 在短页面里，
footer可能悬在半空；在长页面里，可能叠在内容上 - 即使硬加
bottom: 0，也无法响应视口高度变化，且不支持 IE 和旧 Safari - 真正适合的是悬浮导航栏、冻结表头这类“滚动中吸附”的场景，不是页脚
最容易被忽略的是 Safari ≤15.3 对 minmax() 的 bug——如果你混用 Grid 方案又没兜底，问题只在特定设备复现，排查成本极高。Flex 方案虽代码略多，但容错率高，哪怕 footer 高度因响应式文字缩放而动态变化，也能稳住布局。
