内容短或缺失时如何将页脚推到页面底部？

Question

我有一个包含页眉、内容和页脚 div 的外部 div 的页面。我希望页脚 div 紧贴浏览器的底部，即使内容 div 不够高而无法填充可视区域（即没有滚动）。

原文由 Will Curran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 flexbox 可以轻松解决您的问题。只需将您的 .container 和 .footer 包装在一个最小高度为 100vh 的弹性容器中，将方向切换为列，以便它们堆叠在彼此之上，并用空格对齐内容，以便页脚移动到底部。

 .flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}

 <div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

原文由 Luke Flournoy 发布，翻译遵循 CC BY-SA 4.0 许可协议