设置页脚始终可见需使用position: fixed; bottom: 0;并为body添加padding-bottom防止内容遮挡，确保页脚固定显示在视口底部。

要在页面滚动时让页脚始终可见，可以通过 CSS 中的 position: fixed 结合 bottom 属性来实现。关键在于确保元素固定在视口底部，并且不被其他内容遮挡。

使用 position: fixed 固定页脚位置

将页脚设置为固定定位后，它会脱离文档流并相对于浏览器视口固定位置，即使页面滚动也不会移动。

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。

立即学习“前端免费学习笔记（深入）”；

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

body {
  padding-bottom: 60px; /* 值应大于等于页脚高度 */
}

这个值通常设为页脚的高度，比如页脚高 60px，那么 body 的下内边距也设为 60px，确保最后一部分内容不会被遮住。

配合 HTML 结构使用

结构上建议将页脚放在 body 最后，但仍通过 CSS 固定位置：

<body>
  <main>
    <!-- 页面主要内容 -->
  </main>
  <footer>
    &copy; 2025 我的网站
  </footer>
</body>

这样既保持语义化结构，又能实现视觉上的“始终可见”效果。

基本上就这些。只要设置好 fixed 定位、bottom: 0 和适当的 z-index 与 padding，页脚就能稳定地停留在屏幕底部，不随滚动消失。不复杂但容易忽略细节。