当页面内容较短时，页脚无法贴底显示，而内容较长时又可能遮挡内容——这是因 `position: absolute` 缺少 `bottom: 0` 导致定位基准缺失；正确设置可实现真正的“粘性页脚”。
要让页脚（<footer>）始终紧贴浏览器窗口底部（即实现“Sticky Footer”），关键在于明确其绝对定位的参照边界。当前 CSS 中仅设置了 position: absolute 和 width: 100%，但未指定垂直定位方向，导致浏览器默认按文档流顶部对齐（等效于 top: auto; bottom: auto），因此在短页面中页脚会停留在其原始文档位置，留下底部空白；而在长页面中，因未约束 bottom，它可能随滚动“悬停”在可视区域上方，甚至覆盖正文。
✅ 正确做法是：显式声明 bottom: 0，并确保父容器（body）具备明确的高度上下文：
html, body {
min-height: 100%;
margin: 0; /* 防止默认 body 外边距干扰 */
}
footer {
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0; /* ✅ 关键：锚定到容器底端 */
}⚠️ 注意事项：
- position: absolute 的 bottom: 0 是相对于最近的已定位祖先元素（即 position 值为 relative/absolute/fixed 的父级）。若 body 未设置 position: relative，则 footer 将相对于 <html>（即视口）定位——这通常是期望行为，但需确保 html 和 body 高度至少为 100vh（推荐用 min-height: 100% + height: 100% 更稳妥）。
- 若页脚遮盖正文（如长页面中重叠内容），说明内容区域未预留足够底部内边距或页脚未脱离文档流影响布局。此时更健壮的方案是改用 Flexbox 布局（现代推荐）：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1; /* 占据剩余空间，推页脚到底部 */
}
footer {
background-color: #0b2239;
width: 100%;
}该方式无需绝对定位，天然避免遮挡问题，且响应式友好。总结：bottom: 0 是修复当前问题的最小改动，但 Flexbox 是更可维护、语义更清晰的长期解决方案。
立即学习“前端免费学习笔记（深入）”；
