如何使用 CSS 实现一个 sticky footer（粘性页脚）效果？

推荐答案

// www.javascriptcn.com code example
/* 方法一：使用 flexbox */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 保证内容少时页面也充满视口 */
}

main {
  flex: 1; /* 让 main 元素占据剩余空间 */
}

footer {
  /* footer的内容撑满后不会覆盖main内容 */
}

/* 方法二：使用 grid */
body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 内容高度自适应，中间内容占据剩余空间，页脚高度自适应 */
  min-height: 100vh;
}

main {
  /* main 元素不需要特殊样式 */
}

footer {
  /* footer 内容撑满后不会覆盖main内容 */
}


/* 针对不同浏览器，添加兼容性处理 */
html, body {
  margin: 0;
  padding: 0;
}

本题详细解读

粘性页脚（Sticky Footer）是指当页面内容较少时，页脚固定在浏览器视口的底部；当页面内容足够多以至于超出视口时，页脚被内容撑开，跟随内容自然滚动到页面底部。实现粘性页脚的常见方法主要有两种：使用 Flexbox 和使用 Grid。

使用 Flexbox 实现

1. 设置 body 元素为 flex 容器：

   • display: flex; 使 body 元素成为一个 flex 容器。
   • flex-direction: column; 使 flex 容器中的项目按垂直方向排列（即内容、页脚）。
   • min-height: 100vh; 确保页面内容不足以充满视口时，body 至少占据整个视口的高度，防止页脚向上跑。

2. 让 main 元素占据剩余空间：

   • flex: 1; 让 main 元素伸缩并尽可能占据剩余的可用空间，从而将 footer 推到页面底部。

3. footer 元素不需要特殊样式：

   • footer 元素会自然地被推到页面底部，且内容撑开时，会自动跟随滚动。

使用 Grid 实现

1. 设置 body 元素为 grid 容器：

   • display: grid; 使 body 元素成为一个 grid 容器。
   • grid-template-rows: auto 1fr auto; 创建三行：
     • 第一行 (auto) 高度根据内容自适应（比如头部）。
     • 中间行 (1fr) 占据剩余所有可用空间，也就是 main 的位置。
     • 第三行 (auto) 高度根据内容自适应（页脚）。
   • min-height: 100vh; 确保页面内容不足以充满视口时，body 至少占据整个视口的高度，防止页脚向上跑。

2. main 元素不需要特殊样式：

   • main 元素自动定位到中间的 grid 行，并将页脚推到下方。

3. footer 元素不需要特殊样式：

• footer 元素会被定位到最下方的 grid 行，并跟随内容滚动。

兼容性处理

添加 html, body { margin: 0; padding: 0; } 用于消除浏览器默认的 margin 和 padding，保证布局的一致性。