CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Ivan Saveliev
Ivan Saveliev
9,153 Points

Sticky footer: Have anyone tried to apply "margin-top: auto" to the ".main-footer"?

As the title goes - Have anyone tried to apply "margin-top: auto" to the ".main-footer"?

 .main-footer {
  margin-top: auto;
}

It sticks footer to the bottom too but I'm just interested what issues could cause this method? Or whether it can cause any unpredictable issues?

4 Answers

Ron McCranie
Ron McCranie
7,834 Points

I don't know that this would give you the effect you're looking for. If it's a sticky footer you're after try using fixed positioning and bottom 0 like this:

.main-footer { 
    position: fixed; 
    bottom: 0; 
}
Aaron Selonke
Aaron Selonke
10,323 Points

Wow, add width: 100%; that is the easiest thing that I've seen for a footer, Thanks

Ivan Saveliev
Ivan Saveliev
9,153 Points

Friends, I don't have problem of making a sticky footer. The question was if somebody tried technique I've wrote in the question and whether it has 'weak' places.

Reason for question was that Guil demonstrated 'margin-top: auto' technique in a content <div>, that puts element to the footer of the div and stick it there, but for the sticky footer he applied another technique, hence the question: why not just 'margin-top: auto'?

Kamila Mielczarek
Kamila Mielczarek
3,294 Points

Try this one:

.main-footer{
  margin-top: auto;
}
body{
  display: flex;
  height: 100vh;
  flex-direction: column;
}
Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 31,312 Points

Using that, the footer doesn't reach the bottom of the viewport/window for me. I'd still need to make the body a flex container, at which point, I might as well just add the other flex properties to it and be done with it.

You could use the margin-top: auto; on the .main-footer instead of the flex: 1; on the .row elements to kind of 'snap' the footer to the bottom, in a similar manner to how Guil suggested you could use the margin-right: auto on the logo or first nav elements at the top to get them to stick to left.

The other thing that might confuse people with Guil's use of the term 'sticky' is that sometimes people think of that being 'fixed' to the bottom, or at least fixed once people start scrolling downwards or something.