Sticky footer with flexbox

by

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.

More Related Contents:

  1. justify-content: space-between failing to align elements as expected
  2. Vertically center element on HTML page with some content on top (Bootstrap)
  3. How to place elements like this
  4. Bootstrap 4 Carousel “Half of previous”
  5. Last margin / padding collapsing in flexbox / grid layout
  6. Equal width flex items even after they wrap
  7. How can I combine flexbox and vertical scroll in a full-height app?
  8. Why isn’t object-fit working in flexbox?
  9. How do you get centered content using Twitter Bootstrap?
  10. text-overflow is not working when using display:flex
  11. Gap in Bootstrap stacked rows
  12. Flexbox alternative for IE9
  13. Is inside block correct?
  14. Hiding elements in responsive layout?
  15. Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
  16. Table headers position:sticky and border issue
  17. Use Fieldset Legend with bootstrap
  18. Bootstrap navbar link color won’t change
  19. Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  20. Why are some of my CSS rules not working?
  21. Bootstrap Grid, do I need a container?
  22. Bootstrap 5 layout for different sizes cards – like Pinterest
  23. How to make a flex item not fill the height of the flex container? [duplicate]
  24. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  25. How can I make Bootstrap 4 columns all the same height? [duplicate]
  26. Changing image src depending on screen size
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Why is my .sticky-top class not working in Bootstrap 4?
  29. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  30. Making a flex item float right

Leave a Comment