答案：推荐使用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自然被推到最下方。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

方法二：使用绝对定位 + 外边距

适用于不支持Flex的旧环境，但需要额外处理内容遮挡问题。

CSS样式：

立即学习“前端免费学习笔记（深入）”；

body, html {
  height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
}

注意：父容器必须有明确的高度（如100vh或设置html/body高度），并且给内容区域添加与footer等高的padding-bottom，防止内容被遮挡。

常见问题提醒

• 确保html和body没有默认margin影响布局
• footer高度尽量固定，便于计算预留空间
• 移动端测试时注意键盘弹出对视口的影响

基本上就这些。推荐优先使用Flexbox方案，代码清晰，维护简单，兼容主流浏览器。绝对定位适合简单页面或需要兼容老版本IE的情况。选择哪种取决于你的项目需求和浏览器支持范围。

以上就是如何用