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>

对于不知道反应的人：外部div可以被视为“普通”html页面上的body元素。

css for body-div：

min-height: 100vh;

所以基本上我将内部div和主页脚分别推到顶部和底部，方法是将容器设置为flex-box，并将justify-content的属性设置为space-between。

此外，我想补充一点，我的网站的内容，除了页脚，将进入内部div。

Answer 1

是的，这是一个正常的设置。 justify-content: space-between应该做的是：将第一个和最后一个元素固定到容器的边缘。

＆＃13;

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

article { background-color: lightgreen; }
footer  { background-color: orangered;  }
body    { margin: 0; }

＆＃13;

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

＆＃13;

此外，如果您希望主要内容填充空白区域，同时将页脚固定到底部，您甚至不需要justify-content。使用flex-grow。

＆＃13;

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

article {
  flex-grow: 1;
  background-color: lightgreen;
}

footer  { background-color: orangered;  }
body    { margin: 0; }

＆＃13;

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

＆＃13;

最后，当Flex容器中有多个元素时，justify-content可能无法提供足够的对齐选项。使用auto margins可以更灵活。

Flexbox的粘性页脚

1 个答案: