Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,836 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;
}

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.