在网页开发过程中，很多场景下需要让页脚始终固定在页面底部，即使页面内容不足一屏高度时，页脚也不会上移，而是保持在视口最下方。同时还需要适配不同尺寸的屏幕，保证移动端和桌面端的显示效果一致。下面介绍两种常用的响应式实现方案。
方案一：Flex弹性布局实现
这种方案利用flex布局的自动分配剩余空间特性，让主体内容区域自动占据除页头、页脚之外的所有空间，从而实现页脚始终在底部。首先搭建基础的HTML结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局页脚固定</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置html和body高度为100%，作为flex容器的基准 */
html, body {
height: 100%;
}
/* 最外层容器设置为flex列布局 */
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 页头样式 */
.header {
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
line-height: 60px;
border-bottom: 1px solid #ddd;
}
/* 主体内容区域，设置flex-grow为1，自动占据剩余空间 */
.main-content {
flex-grow: 1;
padding: 20px;
background-color: #fff;
}
/* 页脚样式 */
.footer {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
padding: 0 20px;
}
/* 响应式适配：小屏幕下调整页头和页脚高度 */
@media screen and (max-width: 768px) {
.header {
height: 50px;
line-height: 50px;
}
.footer {
height: 60px;
line-height: 60px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">网站页头</header>
<main class="main-content">
<p>这里是页面主体内容，当内容较少时，页脚会自动固定在底部。</p>
<p>如果内容足够多，页脚会在内容下方，滚动到最底部才能看到。</p>
</main>
<footer class="footer">© 版权所有 页脚内容</footer>
</div>
</body>
</html>
这种方案的核心逻辑是给最外层容器设置min-height: 100vh，保证容器至少占满整个视口高度，然后通过flex-direction: column让子元素纵向排列，主体内容设置flex-grow: 1，会自动填充页头和页脚之外的所有剩余空间，无论内容多少，页脚都会被挤到最底部。
方案二：绝对定位配合calc计算高度
如果项目不支持flex布局，或者需要兼容更老的浏览器，可以使用绝对定位结合calc计算高度的方案。首先还是搭建基础HTML结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位页脚固定</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置body为相对定位，作为页脚绝对定位的参考 */
body {
position: relative;
min-height: 100vh;
padding-bottom: 80px; /* 预留页脚的高度空间 */
}
/* 页头样式 */
.header {
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
line-height: 60px;
border-bottom: 1px solid #ddd;
}
/* 主体内容区域 */
.main-content {
padding: 20px;
background-color: #fff;
}
/* 页脚绝对定位在底部 */
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 80px;
}
/* 响应式适配：小屏幕下调整页脚高度和body的padding-bottom */
@media screen and (max-width: 768px) {
body {
padding-bottom: 60px;
}
.header {
height: 50px;
line-height: 50px;
}
.footer {
height: 60px;
line-height: 60px;
font-size: 14px;
}
}
</style>
</head>
<body>
<header class="header">网站页头</header>
<main class="main-content">
<p>这里是页面主体内容，页脚通过绝对定位固定在底部。</p>
<p>body设置min-height为100vh，保证至少占满视口高度，同时预留页脚高度的内边距，避免内容被页脚覆盖。</p>
</main>
<footer class="footer">© 版权所有 页脚内容</footer>
</body>
</html>
这种方案的核心逻辑是给body设置position: relative和min-height: 100vh，然后给页脚设置position: absolute; bottom: 0，让页脚固定在body的最底部。同时给body设置padding-bottom，值等于页脚的高度，避免主体内容被页脚遮挡。响应式适配时只需要同步修改页脚高度和body的padding-bottom值即可。
两种方案对比
下面是两种方案的优劣势对比，开发者可以根据项目需求选择：
| 对比维度 | Flex布局方案 | 绝对定位方案 |
|---|---|---|
| 兼容性 | 支持IE10及以上浏览器 | 支持IE8及以上浏览器 |
| 实现复杂度 | 代码简洁，逻辑清晰 | 需要手动计算预留空间 |
| 内容适配性 | 内容高度变化时自动调整 | 内容高度变化时需要同步调整padding |
| 推荐场景 | 现代浏览器项目，优先选择 | 需要兼容老浏览器的项目 |
注意事项
- 使用flex方案时，要确保html和body的高度设置正确，否则
100vh的计算可能会出现偏差。 - 使用绝对定位方案时，如果页头高度是动态的，需要同步调整body的padding-top，避免内容被页头遮挡。
- 响应式适配时，除了调整页脚高度，还要注意字体大小、内边距等细节，保证移动端的显示效果。
- 如果页面有固定定位的导航栏等其他元素，需要额外计算这些元素占用的空间，避免布局错乱。