如何将页脚固定到可滚动页面底部（仅滚动到底部可见）

架构老林

2026-8-22

解决方案

核心思路

不要给页脚设置position: fixed属性，让它回归正常文档流；或者通过Flexbox布局实现「内容不足时页脚固定在视口底部，内容过长时页脚随内容到页面末尾」的适配效果。

方法一：基础版（仅随内容到页面末尾）

直接移除页脚的position: fixed及相关定位属性（比如bottom: 0、left: 0），页脚会自动跟随在所有内容的最后，只有滚动到页面底部时才会显示。

方法二：进阶版（适配内容高度）

如果需要兼顾「内容短时长在视口底部，内容长时随内容到页面末尾」的需求，可使用Flexbox布局：

HTML结构

<div class="page-container">
  <main class="main-content">
    <!-- 页面主体内容 -->
  </main>
  <footer class="page-footer">
    页脚内容
  </footer>
</div>

CSS样式

/* 重置默认边距 */
body {
  margin: 0;
}

.page-container {
  min-height: 100vh; /* 容器高度至少占满整个视口 */
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1; /* 让内容区域填充容器剩余空间 */
}

.page-footer {
  background: #333;
  color: #fff;
  padding: 1.2rem;
  /* 不要设置position: fixed相关属性 */
}