当页面内容较短时，页脚容易上移留出空白；内容较长时又可能覆盖主体内容。本文通过 `position: absolute` 结合 `bottom: 0` 与 `min-height: 100%` 的正确配合，实现页脚在所有情况下都紧贴视口底部且不破坏布局。
要使页脚始终吸附在浏览器窗口底部（而非文档末尾），关键在于明确其定位上下文和容器高度约束。你当前的 CSS 存在两个核心问题：
- position: absolute 的元素若未指定 top 或 bottom，默认按 top: auto（即基于文档流位置）计算，导致在短页面中“悬浮”在内容之后、而非视口底部；
- html, body { min-height: 100% } 是必要前提，但仅此不足以确立绝对定位的参照边界——footer 的 absolute 定位会相对于最近的已定位祖先元素（如 body），而 body 必须拥有明确的高度基准。
✅ 正确解法如下：
html {
height: 100%; /* 推荐显式设置，确保根元素撑满视口 */
}
body {
min-height: 100%;
margin: 0; /* 防止默认外边距干扰高度计算 */
position: relative; /* 为 footer 提供可靠的定位上下文 */
}
footer {
background-color: #0b2239;
position: absolute;
width: 100%;
bottom: 0; /* ✅ 关键：锚定到 body 底部 */
left: 0;
}⚠️ 注意事项：
- 不要遗漏 body { position: relative }：否则 footer 可能相对于 或更外层容器定位，行为不可控；
- 避免 body { height: 100% }（除非确定内容永不超长）：这会强制截断长页面，应坚持用 min-height: 100%；
- 若页脚需随内容自然延展（如长页面中出现在内容末尾），则应改用 flexbox 布局（body { display: flex; flex-direction: column; min-height: 100vh; } + main { flex: 1; } + footer 无定位），但本方案专注解决「始终贴底」这一特定需求；
- 测试时请清空浏览器缓存，并确保 HTML 结构中 footer 是 body 的直接子元素。
该方案轻量、兼容性好（支持 IE9+），适用于登录页、介绍页等内容长度不确定但需视觉统一的场景。
立即学习“前端免费学习笔记（深入）”；
