使用 CSS 使页脚固定在底部

是否曾经想过让页脚固定在底部，但如果内容较大，就会被推下？

为了演示我创建了此图像。

这说明：

• 左图：绿色框是视口，黄色是内容，非常小，粉色页脚粘在底部
• 右：内容大于视口，因此它也将页脚向下推。

对于这个特定问题，有相当多的解决方案，它们都有其优点和缺点。

我只会演示其中的两个，因为我认为它们是最主流的。

这些将是：

• CSS 弹性框粘性页脚
• CSS 网格粘性页脚

CSS 弹性框粘性页脚

利用 flex，我们可以通过扩展内容部分轻松实现这种粘性页脚效果。

这意味着我们将主体设置为弹性元素，并且内容部分将具有flex: 1 0 auto值。

该值强制内容扩展为最大的元素，因此如果我们有一个较小的内容区域，它将自动扩展以填充空间。

我们将使用的 HTML 结构：

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>

现在让我们首先为主体添加一个 flex 属性：

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

这告诉我们的 body 元素变成了一个 flex 元素，也就是垂直方向的元素。
然后我们根据视口设置最小高度。

然后我们要做的就是将以下属性添加到我们的内容 div 中。

.content {
  flex: 1 0 auto;
}

该行将强制内容块在内容和页脚之间留出空间。

您可以在以下 Codepen 上查看此方法的实际效果。
您可以使用按钮在无文本和大量文本之间切换。

CSS 网格粘性页脚

现在对于网格来说是一个非常相似的设置，我们实际上可以使用相同的HTML方法。

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>

现在对于我们的身体我们可以使用以下设置：

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

这将告诉我们的身体像网格一样运作，并有 2 行设置，其中第一个将使用1fr1 个分数单位。

它归结为内容扩展其需要或可以填充的任何内容，并且页脚是自动的，这意味着它将采用页脚中副本的大小。

那么我们甚至不需要为内容 div 添加任何样式。

其结果如下：

您可以再次单击按钮来切换复制。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。