使用 fixed 定位可让页脚始终固定在视窗底部，通过设置 position: fixed、bottom: 0、width: 100% 实现贴底显示，需配合 body 的 padding-bottom 防止内容遮挡，并合理设置 z-index 确保层级，适用于页脚常驻场景，但若需页脚随内容流动后吸附，应选用 sticky 或 flexbox 布局。
要让页脚始终固定在页面底部，即使内容不足一屏也能贴底显示，使用 CSS 的 fixed 定位是一种简单有效的方法。下面介绍如何实现。
将页脚元素设置为 position: fixed，并指定其位于视窗底部。这样无论页面是否有足够内容，页脚下部都会紧贴浏览器窗口的底部。
示例代码：
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; /* 防止内容被页脚遮挡 */
}
这种做法适合需要页脚常驻屏幕底部的场景，比如移动端应用、导航栏或版权信息展示。
立即学习“前端免费学习笔记（深入）”；
如果想让页脚在滚动到底部前随内容流动，到底部再“吸附”住，可以用 position: sticky，但该方式需配合父容器高度处理。而 fixed 是直接相对于视窗定位，更适用于始终固定的情况。
基本上就这些，fixed 定位实现页脚固定不复杂，关键是防止遮挡内容和合理设置样式。根据实际需求选择 fixed 或其他布局方式会更灵活。
以上就是如何用cssfixed定位实现页脚固定的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
634
收藏
