粘性页脚与flexbox [英] Sticky footer with flexbox

问题描述

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

但是因为我没有看到其他人使用相同的东西，我想知道这样做的方式是否被破坏，而根本不支持弹出框的浏览器？

我使用bootstrap来设置flex-box，我在React中工作，这里是我的代码：

 < div className =body-div d-flex flex-column justify-content-between> 
< div> <！ - 内部div  - > 
< MainNav /> 
< / div> 
< MainFooter className =d-flex flex-column/> 
< / div> 
  

对于不知道反应的人：外部div可以被看作是一个'正常'html页面。

css for body-div：

 最小高度：100vh; 
  

所以基本上我让内部div和主页脚分别通过设置被推到顶部和底部他们的容器flex-box的justify-content属性设置为空格。

另外我想补充一点，我的网站的内容除了页脚也就是说，会进入内部div。

解决方案

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

main {display：flex; flex-direction：列; justify-content：space-between;高度：100vh;}文章{background-color：lightgreen; } footer {background-color：orangered; } body {margin：0; }

< main> <文章>内部div< /文章> < footer> footer< / footer>< / main>

$ b

另外，如果您希望主要内容填充空白空间，而将页脚固定在底部，则甚至不需要 justify-content 。使用 flex-grow 。

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

< main> <文章>内部div< /文章> < footer> footer< / footer>< / main>

$ b

最后，当您在flex容器中有多个元素时， justify-content 可能无法提供足够的对齐选项。您可以通过 汽车边距 获得更多灵活性。

I found out a very simple way of creating a sticky footer for my website, and at first sight it seems to work perfectly.

But since I don't see other people using the same thing, I am wondering if this way of doing it is broken, outside of browsers which don't support flex-box at all?

I use bootstrap for setting flex-box, and I am working within React, here is my code:

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

For people who don't know react: the outer div can be seen as the body element on a 'normal' html page.

css for the body-div:

min-height: 100vh;

So basically I let the inner div and the main footer be pushed to the top and bottom respectively by setting their container to flex-box with the property of justify-content set to space-between.

Also I'd like to add that my site's content, except for the footer that is, will go inside the inner div.

解决方案

Yes, this is a normal set-up. That's what justify-content: space-between is supposed to do: Pin the first and last elements to the edges of the container.

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>

Also, if you want the main content to fill the empty space, while pinning the footer to the bottom, you don't even need justify-content. Use 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>

Lastly, when you have multiple elements in a flex container, justify-content may not provide enough options for alignment. You have a lot more flexibility with auto margins.

这篇关于粘性页脚与flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！