粘性页脚
粘性页脚模式是一种页脚“粘贴”到视口底部的模式，在内容短于视口高度的情况下。我们将在本食谱中介绍几种创建它的方法。
需求
粘性页脚模式需要满足以下要求
- 内容较短时，页脚粘贴到视口底部。
- 如果页面内容扩展到视口底部之外，则页脚会像平常一样位于内容下方。
方案
要查看代码，您可以下载完整示例。
注意：在本示例和后续示例中，我们使用了一个设置为min-height: 100%的包装器。您也可以通过在<body>上设置min-height为100vh，然后将其用作网格容器来实现全页面效果。
选择
在上面的示例中，我们使用 CSS 网格布局实现了粘性页脚。.wrapper 的最小高度为100%，这意味着它与它所在的容器一样高。然后，我们创建一个具有三行的单列网格布局，每部分布局一行。
网格自动放置会按照源顺序放置我们的项目，因此标题进入第一个自动大小的轨道，主要内容进入1fr轨道，页脚进入最后一个自动大小的轨道。1fr轨道将占用所有可用空间，因此会增长以填充间隙。
替代方法
您还可以使用 Flexbox 创建粘性页脚。
Flexbox 示例的开始方式相同，但我们在.wrapper上使用display:flex而不是display:grid；我们还将flex-direction设置为column。然后，我们将主要内容设置为flex-grow: 1，并将其他两个元素设置为flex-shrink: 0 - 这可以防止它们在内容填充主要区域时缩小。