Skip to content

如何确保页脚始终位于页面底部？

在创建一个精美的网站时，防止页脚浮动到页面上方是很重要的。页面上的内容较少时可能会遇到这个问题，但是使用几行CSS代码很容易解决。假设你的HTML代码类似下面的片段，下面是两种现代的方法来确保页脚始终位于页面底部：

<body>
  <main><!-- 主要内容 --></main>
  <footer><!-- 页脚内容 --></footer>
</body>

使用Flexbox

你可以使用Flexbox来确保页脚始终位于页面底部。这可以通过给body元素设置min-height: 100vh、display: flex和flex-direction: column来实现。然后，给footer元素设置margin-top: auto，使其边距填充它与前一个兄弟元素之间的剩余空间。请注意，这种技术不会拉伸前一个兄弟元素，而是将页脚推到页面底部。

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

footer {
  margin-top: auto;
}

使用Grid

你也可以以非常类似的方式使用Grid。只需将display: flex替换为display: grid，将flex-direction: column替换为grid-template-rows: 1fr auto，添加到body元素中。footer元素不需要额外的属性。在这种情况下，使用fr单位来拉伸main元素以填充剩余空间。

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

注意事项

正如你所看到的，这两种技术都很容易实现。根据你的需求，其中一种可能比另一种更合适。一般来说，在大多数情况下，网格更加灵活，并且可以帮助你处理更复杂的布局，比如包含标题或侧边栏的布局。