使用 fixed 定位可让页脚始终固定在视窗底部，通过设置 position: fixed、bottom: 0、width: 100% 实现贴底显示，需配合 body 的 padding-bottom 防止内容遮挡，并合理设置 z-index 确保层级，适用于页脚常驻场景，但若需页脚随内容流动后吸附，应选用 sticky 或 flexbox 布局。
要让页脚始终固定在页面底部，即使内容不足一屏也能贴底显示，使用 CSS 的 fixed 定位是一种简单有效的方法。下面介绍如何实现。
使用 fixed 定位固定页脚
将页脚元素设置为 position: fixed，并指定其位于视窗底部。这样无论页面是否有足够内容，页脚下部都会紧贴浏览器窗口的底部。
- 给页脚元素设置 position: fixed
- 设置 bottom: 0 让它对齐视窗底部
- 设置 left: 0 和 width: 100% 保证宽度撑满
- 注意避免遮挡页面内容，可给主体内容添加 padding-bottom
示例代码：
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
text-align: center;
line-height: 60px;
z-index: 1000;
}
body {
padding-bottom: 60px; /* 防止内容被页脚遮挡 */
}
适用场景与注意事项
这种做法适合需要页脚常驻屏幕底部的场景，比如移动端应用、导航栏或版权信息展示。
立即学习“前端免费学习笔记（深入）”；
- fixed 定位会让页脚脱离文档流，可能覆盖内容，因此需调整主体部分的下边距或内边距
- 若希望页脚在内容不足时贴底、内容多时正常排布（非固定），应使用 flexbox 布局而非 fixed
- 确保 z-index 足够高，避免被其他元素遮挡
与 sticky 定位的区别
如果想让页脚在滚动到底部前随内容流动，到底部再“吸附”住，可以用 position: sticky，但该方式需配合父容器高度处理。而 fixed 是直接相对于视窗定位，更适用于始终固定的情况。
基本上就这些，fixed 定位实现页脚固定不复杂，关键是防止遮挡内容和合理设置样式。根据实际需求选择 fixed 或其他布局方式会更灵活。
