答案：推荐使用Flexbox布局实现底部固定footer，通过设置容器display: flex、flex-direction: column和min-height: 100vh，内容区域flex: 1占据剩余空间，使footer始终位于底部；当不支持Flex时可采用绝对定位方案，父级设高并为内容区添加与footer等高的padding-bottom，避免内容遮挡。
要实现底部固定footer，也就是让footer始终停留在页面底部，当内容不足一屏时footer靠底，内容多时footer在内容后正常排列，可以通过几种CSS方法实现。下面介绍两种常用且兼容性好的方案。
方法一：使用 Flexbox 布局（推荐）
这是现代最简洁、最可靠的实现方式，适用于大多数布局场景。
HTML结构：
<div class="container"><header>头部</header>
<main class="content">内容区域</main>
<footer>固定底部</footer>
</div>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
flex-direction: column;
min-height: 100vh; /* 最小高度为视口高度 */
}
.content {
flex: 1; /* 占据剩余空间，把footer推到底部 */
}
说明：容器设为flex并纵向排列，最小高度占满视口，内容区域用 flex: 1 自动撑开，footer自然被推到最下方。
方法二：使用绝对定位 + 外边距
适用于不支持Flex的旧环境，但需要额外处理内容遮挡问题。
CSS样式：
立即学习“前端免费学习笔记（深入）”；
body, html {height: 100%;
}
.content {
padding-bottom: 60px; /* 预留footer高度的空间 */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
注意：父容器必须有明确的高度（如100vh或设置html/body高度），并且给内容区域添加与footer等高的padding-bottom，防止内容被遮挡。
常见问题提醒
- 确保html和body没有默认margin影响布局
- footer高度尽量固定，便于计算预留空间
- 移动端测试时注意键盘弹出对视口的影响
基本上就这些。推荐优先使用Flexbox方案，代码清晰，维护简单，兼容主流浏览器。绝对定位适合简单页面或需要兼容老版本IE的情况。选择哪种取决于你的项目需求和浏览器支持范围。
