使用CSS实现页脚固定有三种方法：1. fixed定位使页脚始终在视口底部，但需避免遮挡内容；2. absolute定位配合父容器min-height实现粘性页脚，适合内容较少时保持页脚在页面底端；3. Flexbox布局通过flex:1让主体占剩余空间，推荐用于现代浏览器，结构清晰且自适应。
要让页脚固定在页面底部，无论页面内容多少都能保持位置稳定，可以通过 CSS 的 position 属性配合其他布局技巧实现。以下是几种常见且有效的方法。
1. 使用 fixed 定位（始终固定在视口底部）
如果你希望页脚一直停留在浏览器窗口的最下方，即使页面滚动也不动，可以使用 position: fixed。
示例代码：
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
z-index: 1000;
}
注意：这种方式会让页脚覆盖内容，建议给页面主体添加 padding-bottom 避免内容被遮挡。
2. 使用 absolute 定位 + 父容器最小高度（经典粘性页脚）
当页面内容较少时，页脚仍能贴在页面底部；内容多时自然向下延伸。这种方法适合“粘性页脚”效果。
立即学习“前端免费学习笔记（深入）”；
HTML 结构：头部 内容区域
CSS 样式：
html, body {
height: 100%;
margin: 0;
}
.container {
min-height: 100%;
position: relative;
padding-bottom: 60px; / 留出页脚高度 /
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
text-align: center;
}
原理是利用 min-height: 100% 让容器至少撑满视口高度，页脚通过绝对定位贴在容器底部。
3. 使用 Flexbox 布局（推荐现代方法）
更简洁、语义清晰的方式是用 Flexbox 控制整个页面布局。
CSS 示例：
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1; / 主体内容占剩余空间 /
}
footer {
height: 60px;
background: #333;
color: white;
text-align: center;
}
这样，main 区域会自动拉伸填满空白，页脚自然被推到底部。
基本上就这些。根据你的项目需求选择合适的方式：想要始终显示用 fixed，想要随内容流动但不留白用 absolute + min-height，结构清晰推荐用 Flexbox。不复杂但容易忽略细节，比如设置 html 和 body 的高度。
