如何让页脚固定在页面底部

当您创建了这个包含大量内容的精彩设计，然后偶然发现一个页面没有足够的内容将页脚一直推到页面底部时，您难道不讨厌这种感觉吗？

像这样：

看到底部那个可怕的白色缝隙了吗？呸。

我们如何才能将页脚粘贴到屏幕底部？

幸运的是，一旦你学会了如何修复，修复起来就相当简单了。这篇文章就是教你如何彻底避免这个难看的“页脚间隙”！🎉

第一：内容结构

我接触的大多数网站都拥有相当简单的基本结构。它们由一个外部容器、一个网站页眉、一个内容区域和一个网站页脚组成。这是一种用途广泛且流行的设计，大多数网站都对此进行了某种程度的改进。

您可以使用以下 HTML 创建此结构：

<div class="site-container">
  <header class="site-header">...</header>
  <main class="site-content">
    ...
  </main>
  <footer class="site-footer"></footer>
</div>

然后：CSS！

我们将使用 CSS 布局算法flexbox将那个讨厌的页脚推到它所属的装订线中。

首先，我们将以下样式应用到我们的site-container-<div />封装整个网站的包装中：

.site-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

这里，我们指定主容器使用弹性盒子布局，其子容器垂直堆叠。我们还指定站点容器的高度至少与屏幕高度相同。

其次，我们必须对我们的 CSS 规则应用一条site-content：

.site-content {
  flex: 1;
}

flex: 1是一种快捷的说法，表示物品应该在容器内尽可能地长大。

就是这样！

这是 CodePen 中的最终结果：

希望你觉得这有用！:)