在网页布局中，footer的定位是前端开发的基础需求，常见的场景包括内容较少时footer固定在页面底部，内容较多时footer跟随内容自然下沉。下面介绍几种主流的CSS实现footer定位的方法，每种方法都附带完整代码。
方法一：flex布局实现sticky footer
flex布局是目前最推荐的方案，兼容性覆盖绝大多数现代浏览器，逻辑清晰且易于维护。核心思路是将页面容器设置为flex列布局，让内容区域自动占据剩余空间，footer自然就被推到最底部。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex实现footer定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
height: 60px;
background-color: #f0f0f0;
text-align: center;
line-height: 60px;
}
.content {
flex: 1; /* 占据剩余所有空间 */
padding: 20px;
background-color: #fff;
}
.footer {
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">页面头部</div>
<div class="content">
<p>这里是页面内容区域，当内容不足时，footer会固定在页面底部</p>
<p>当内容足够多时，footer会跟随内容自然下沉，不会出现覆盖内容的情况</p>
</div>
<div class="footer">页面底部</div>
</div>
</body>
</html>方法二：position定位实现固定footer
如果需要footer始终固定在浏览器窗口底部，不跟随内容滚动，可以使用position定位实现，这种方式兼容性更好，适合需要固定底部导航的场景。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position实现固定footer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding-bottom: 60px; /* 避免内容被footer遮挡 */
}
.header {
height: 60px;
background-color: #f0f0f0;
text-align: center;
line-height: 60px;
}
.content {
padding: 20px;
min-height: calc(100vh - 120px); /* 减去header和footer的高度 */
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="header">页面头部</div>
<div class="content">
<p>这里是页面内容区域，滚动页面时footer会始终固定在窗口底部</p>
<p>内容不足时也不会出现footer悬空的情况</p>
</div>
<div class="footer">固定底部</div>
</body>
</html>方法二：传统margin负值实现sticky footer
这是早期常用的兼容低版本浏览器的方案，不需要flex支持，通过margin负值和padding配合实现footer的定位效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值实现footer定位</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.header {
height: 60px;
background-color: #f0f0f0;
text-align: center;
line-height: 60px;
}
.content {
padding-bottom: 60px; /* 和footer高度一致，避免内容被遮挡 */
padding-left: 20px;
padding-right: 20px;
}
.footer {
height: 60px;
margin-top: -60px; /* 负值拉回footer到内容区域底部 */
background-color: #333;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">页面头部</div>
<div class="content">
<p>这里是页面内容区域，内容不足时footer会贴底</p>
<p>内容过多时footer会跟随内容下沉，兼容性较好</p>
</div>
</div>
<div class="footer">页面底部</div>
</body>
</html>不同方案的选择建议
实际开发中可以根据项目需求选择合适的方案：
- 如果项目不需要兼容IE9及以下浏览器，优先选择flex布局方案，代码简洁维护方便
- 如果需要footer始终固定在窗口底部，不跟随滚动，选择position固定定位方案
- 如果需要兼容非常旧的浏览器，选择margin负值传统方案
需要注意的是，所有方案中都要提前计算好header和footer的高度，避免出现内容被遮挡的问题，同时可以使用box-sizing: border-box属性让内边距和边框的计算更符合预期。
CSSfooter定位flex布局position定位sticky_footer修改时间：2026-06-07 02:48:14