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

推荐答案

-- -------------------- ---- -------
-- ------ ------- --
---- -
  -------- -----
  --------------- -------
  ----------- ------ -- ------------- --
-

---- -
  ----- -- -- - ---- -------- --
-

------ -
  -- ---------------------- --
-

-- ------ ---- --
---- -
  -------- -----
  ------------------- ---- --- ----- -- -------------------------- --
  ----------- ------
-

---- -
  -- ---- --------- --
-

------ -
  -- ------ --------------- --
-


-- --------------- --
----- ---- -
  ------- --
  -------- --
-

本题详细解读

粘性页脚（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，保证布局的一致性。