先澄清一个常见误区：不少开发者习惯用 `position: fixed` 制作页脚，一旦页面内容增多，页脚便会直接覆盖在正文上，滚动交互也受影响。这本质上混淆了“固定在屏幕底部”和“贴附在内容底部”两个概念。
真正的 Sticky Footer 应满足：当页面内容不足一屏时，页脚自然沉于视口底部；当内容充满甚至超出屏幕时，页脚紧随内容末尾，绝不遮挡任何文本。借助 Flexbox 布局，这一需求可以十分简洁地实现。
推荐实现方式：Flexbox 方案
核心原理是将整个 `
` 设为 flex 容器，主内容区通过 `flex: 1` 自动填满剩余空间，页脚则始终位于容器末尾。设置最小高度后，页脚便自然“粘”在底部。HTML 结构（注意语义化与嵌套规范）：
Sticky Footer 示例 网站标题
这里是正文内容……
滚动查看效果 ↓
CSS 样式（精简且稳定）：
/* 重置默认边距，确保 body 全高可用 */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* 至少占满整个视口高度 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 主内容区：弹性伸展，填充剩余空间 */
.content {
flex: 1;
padding: 2rem;
}
/* 页脚：固定高度或自适应，始终位于 flex 容器末尾 */
.footer {
background-color: #4f2e61;
color: #f2f2fc;
padding: 0.5rem 2rem;
text-align: center;
}
注意事项与典型误区
- 避免使用 fixed 或 absolute：这两种定位会使页脚脱离文档流，完全无法响应内容高度变化，几乎必然造成遮挡问题。
- 务必为 body 设置 min-height: 100vh（同时 html 需设 height: 100%），否则 flex 布局无法基于视口高度正确计算剩余空间。
- .content 必须是 body 的直接子元素且带有 flex: 1：这是撑满布局的关键。若中间嵌套了未设置高度的 div，flex 行为将被破坏。
- 移动端响应适配：建议使用 @media (max-width: 768px) 适当调整内边距或字号，但 Flexbox 方案本身已具备良好的响应式表现。
效果实测
- 内容较短时：页脚自动沉底，贴合视口最下方；
- 内容较长需滚动时：页脚稳固地位于所有内容之后，既不遮挡也不悬浮；
- 滚动过程中：页脚始终跟随内容流，行为完全符合用户预期。
该方案已获广泛验证（如 CSS-Tricks 推荐），兼容 Chrome/Firefox/Safari/Edge（2017 年之后版本），无需 JavaScript，语义清晰且维护成本极低。