设置页脚始终可见需使用position: fixed; bottom: 0;并为body添加padding-bottom防止内容遮挡，确保页脚固定显示在视口底部。
要在页面滚动时让页脚始终可见，可以通过 CSS 中的 position: fixed 结合 bottom 属性来实现。关键在于确保元素固定在视口底部，并且不被其他内容遮挡。
将页脚设置为固定定位后，它会脱离文档流并相对于浏览器视口固定位置，即使页面滚动也不会移动。
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
z-index: 1000; /* 确保在其他内容之上 */
}
这样页脚就会一直停留在屏幕最下方。
由于 fixed 元素脱离了文档流，页面内容可能会被页脚盖住，尤其是当内容较短或接近页面底部时。解决方法是给页面主体或容器添加足够的 padding-bottom 或 margin-bottom。
立即学习“前端免费学习笔记（深入）”；
body {
padding-bottom: 60px; /* 值应大于等于页脚高度 */
}
这个值通常设为页脚的高度，比如页脚高 60px，那么 body 的下内边距也设为 60px，确保最后一部分内容不会被遮住。
结构上建议将页脚放在 body 最后，但仍通过 CSS 固定位置：
<body>
<main>
<!-- 页面主要内容 -->
</main>
<footer>
© 2025 我的网站
</footer>
</body>
这样既保持语义化结构，又能实现视觉上的“始终可见”效果。
基本上就这些。只要设置好 fixed 定位、bottom: 0 和适当的 z-index 与 padding，页脚就能稳定地停留在屏幕底部，不随滚动消失。不复杂但容易忽略细节。
以上就是如何在CSS中控制固定页脚_fixed和bottom保证始终可见的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
472
收藏
