Sticky footer with flexbox

问题:

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.

回答1:

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.