sticky footer 不能用 position: sticky 实现，因其依赖父容器滚动，而 sticky footer 需布局弹性占位；现代推荐 flexbox 方案（body flex + margin-top: auto），grid 方案更简洁但兼容性受限，ie11 需 calc + js fallback。
Sticky Footer 为什么用 position: sticky 行不通
因为 position: sticky 依赖父容器滚动，而 Footer 要的是「内容少时压到底部、内容多时随文档流自然撑开」——它不是靠滚动触发的粘性，而是布局层面的弹性占位。强行套用只会让 Footer 在短页面里悬在半空，或在长页面里叠在内容上。
现代方案：Flexbox 布局 + min-height: 100vh
这是目前最稳定、兼容到 edge 16+ 的解法，核心是让 body 成为 flex 容器，Footer 用 margin-top: auto 推到底部。
实操要点：
-
html和body都要设height: 100%，否则min-height: 100vh在某些浏览器下不生效 - 包裹主内容和 Footer 的容器（比如
<div class="page">）必须设 <code>display: flex和flex-direction: column - Footer 不要设
flex-shrink: 0—— 默认就是，加了反而可能破坏高度计算 - 如果 Footer 有固定高度（如
60px），主内容区可加flex: 1确保撑满剩余空间
html, body { height: 100%; } .page { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } footer { margin-top: auto; }Grid 方案：一行代码搞定但要注意兼容性
用 display: grid 配合 grid-template-rows 更简洁，但 safari 15.4 之前对 minmax() 在 100vh 场景下的处理有 bug，容易导致 Footer 溢出或消失。
立即学习“前端免费学习笔记（深入）”；
稳妥写法：
- 只在支持
grid且明确不需要旧 Safari 的项目中使用 - 避免用
1fr直接撑主内容，改用minmax(0, 1fr)防止内容超长时网格项崩溃 -
footer不要设align-self: end—— 它默认就在最后一行，额外设置反而干扰布局
.page { display: grid; grid-template-rows: 1fr min-content; min-height: 100vh; }老项目 fallback：Calc 高度 + JS 监听（仅限 IE11）
IE11 不支持 Flexbox 的 flex: 1 在 min-height: 100vh 下正确计算，纯 css 几乎无解。这时候得用 calc(100vh - [header-height] - [footer-height]) 给 main 设固定高度，并监听 resize 事件修正。
关键细节：
- Header 和 Footer 高度必须是确定值（不能是
em或百分比），否则calc会失效 - JS 中要用
getBoundingClientRect().height动态读取，而不是硬编码像素值 - 别忘了移除监听器，否则 SPA 切页时内存泄漏
现在绝大多数新项目已不用考虑这个路径，但维护老系统时，看到 calc(100vh - 80px) 这类写法，基本就是向 IE11 妥协的痕迹。
真正难的不是选哪种方案，而是判断「当前页面是否真的需要 Sticky Footer」——很多所谓“内容少时 Footer 悬空”的问题，其实是设计稿没定义最小视口高度，或者把导航栏算进了内容区高度。先确认需求本身是否合理，再动手改布局。