Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Ivan Saveliev
Ivan Saveliev
9,153 Points
Posted by 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,837 Points
Ron McCranie
Ron McCranie
7,837 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
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
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
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 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 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.