使用flexbox实现粘性页脚

Question

我发现了一种非常简单的方法来为我的网站创建一个粘性页脚，乍一看似乎完美地工作。

但是，由于我没有看到其他人使用相同的方法，我想知道这种方法是否存在问题，除了根本不支持flex-box的浏览器之外？

我使用bootstrap设置flex-box，并在React中工作，以下是我的代码：

<div className="body-div d-flex flex-column justify-content-between">
  <div>  <!-- inner div -->
    <MainNav/>
  </div>
  <MainFooter className="d-flex flex-column"/>
</div>

对于不了解React的人来说：外部div可以被视为“普通”HTML页面上的body元素。

body-div的CSS：

min-height: 100vh;

基本上，我让内部div和主页脚部分别被推到顶部和底部，通过将它们的容器设置为弹性盒子，并将justify-content属性设置为space-between。

另外，我想补充一下，我的网站内容（除了页脚）将放在内部div中。

- Rik Schoonbeek

Answer 1

是的，这是一种正常的设置。这就是 justify-content: space-between 的作用：将第一个和最后一个元素固定在容器的边缘上。

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

article { background-color: lightgreen; }
footer  { background-color: orangered;  }
body    { margin: 0; }

<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

此外，如果您希望主要内容填充空白空间，同时将页脚固定在底部，则根本不需要使用justify-content。 使用flex-grow即可。

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

article {
  flex-grow: 1;
  background-color: lightgreen;
}

footer  { background-color: orangered;  }
body    { margin: 0; }

<main>
  <article>inner div</article>
  <footer>footer</footer>
</main>

最后，当你在一个 flex container 中有多个元素时，justify-content 可能不能提供足够的对齐选项。使用 自动外边距，你会拥有更多的灵活性。

- Michael Benjamin