将页脚保持在底部：Flexbox 与 Grid

这是系列文章的第一篇，该系列文章探讨了过去 13 多年来我作为前端开发者一直在解决的问题，并提出了一些现代 CSS 解决方案。访问ModernCSS.dev查看整个系列文章及其他资源。

多年来，我一直参考Matthew James Taylor 的这篇文章，寻找一种无论主要内容长度如何都能将网页页脚保持在页面底部的方法。此方法依赖于设置显式页脚高度，虽然不可扩展，但在 Flexbox 之前 (BF) 是一个很好的解决方案。

如果您主要处理 SPA 开发，您可能会对为什么这个问题仍然存在感到困惑，但仍然有可能发现页脚浮动：

• 登录页面
• 博客/新闻文章（无广告...）
• 流程中的插页，例如确认操作
• 产品列表页面
• 日历活动详情

使用现代 CSS 处理这个问题有两种方法：flexbox 和 grid。

这是默认使用 flexbox 方法的演示。如果你打开完整的 Codepen，可以将$method变量替换为flexbox 来grid查看替代方案。

继续阅读演示以了解每种方法。

Flexbox 方法

该方法通过定义以下内容来实现：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

// Optional
main {
  margin: 0 auto;
  // or: align-self: center
  max-width: 80ch;
}

工作原理

首先，我们确保body元素至少能拉伸到屏幕的整个高度。如果内容较短（某些移动浏览器min-height: 100vh除外），这不会触发溢出，并且允许内容根据需要继续拉伸高度。

设置flex-direction: column在保留堆叠块元素方面保持正常文档流的行为（假设的直接子元素body确实都是块元素）。

弹性盒的优势在于能够利用这种margin: auto行为。这个奇怪的技巧会让外边距填充其所在项目与其相应方向上最近的同级项目之间的任何空间。设置后，margin-top: auto页脚实际上会被推到屏幕底部。

陷阱

在演示中，我添加了一个outline来main演示 flexbox 方法中main元素无法填充高度。这就是为什么我们必须使用这个margin-top: auto技巧。这可能对你来说并不重要，但如果有影响，请查看 grid 方法，它会拉伸元素main以填充可用空间。

网格法

该方法通过设置实现：

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

// Optional
main {
  margin: 0 auto;
  max-width: 80ch;
}

工作原理

我们保留了min-height: 100vh这种方法，但随后我们使用了来grid-template-rows正确地隔开事物。

此方法的巧妙之处在于使用了特殊的网格单位fr。 的fr意思是“分数”，使用它要求浏览器计算剩余可用空间的“分数”，以分配给该列或行。在本例中，它会填充页眉和页脚之间的所有可用空间，这也解决了 flexbox 方法中的“陷阱”。

哪一个更好？

看到网格之后，你可能会觉得它明显更胜一筹。但是，如果你在页眉和页脚之间添加了更多元素，则需要更新模板（或者确保始终有一个包裹元素，例如 ，div以免影响任何嵌套的语义/层次结构）。

另一方面，flexbox 方法可用于中间部分具有多个块元素的各种模板 - 例如，一系列<article>元素而不是<main>存档页面的单个元素。

因此，与所有技术一样，这取决于项目:)但我们都同意，拥有这些现代 CSS 布局方法真是太棒了！