本文详解如何通过纯 css 实现页脚始终贴合浏览器窗口底部，解决因页面内容高度不足导致页脚上移、底部留白，或内容过长时页脚遮挡内容的问题。
在实际开发中，一个常见但易被忽视的布局问题就是：页脚（
你当前的 CSS 存在两个关键缺失：
- footer { position: absolute } 缺少定位参考点（即 bottom: 0），导致其默认按 top: auto; bottom: auto 计算，通常表现为“顶部对齐”，而非底部对齐；
- html, body { min-height: 100% } 虽确保了根容器至少撑满视口，但未明确设置 body 的 position: relative —— 这至关重要：因为 position: absolute 的元素会相对于最近的已定位祖先元素（即 position 值为 relative/absolute/fixed/sticky 的父级）进行定位。若 body 未设为 relative，footer 将向上回溯至 html 甚至视口，造成定位基准不可控。
✅ 正确解法如下（推荐完整方案）：
html {
min-height: 100%;
}
body {
min-height: 100%;
position: relative; /* 关键！为 footer 提供定位上下文 */
margin: 0; /* 避免浏览器默认 body margin 导致偏移 */
}
footer {
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要遗漏 body { position: relative }：这是让 footer 精准锚定在页面内容区底部的前提；
- left: 0 与 width: 100% 配合可防止水平偏移（尤其在有滚动条时）；
- 若页脚需随内容自然延伸（如版权信息较多），建议改用 Flexbox 布局（更健壮）：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; } main { flex: 1; } /* 主内容区域自动占满剩余空间 */ footer { width: 100%; }此方式无需绝对定位，天然避免遮挡与留白问题，兼容性良好（IE11+）。
总结：bottom: 0 是定位页脚到底部的必要条件，但必须配合 body { position: relative } 才能确保定位基准准确。优先推荐 Flexbox 方案，语义清晰、行为稳定、维护成本更低。
