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 trialIvan Saveliev
9,153 PointsSticky 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
7,837 PointsI 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;
}
Ivan Saveliev
9,153 PointsFriends, 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
3,294 PointsTry this one:
.main-footer{
margin-top: auto;
}
body{
display: flex;
height: 100vh;
flex-direction: column;
}
Iain Simmons
Treehouse Moderator 32,305 PointsUsing 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.
Aaron Selonke
10,323 PointsAaron Selonke
10,323 PointsWow, add width: 100%; that is the easiest thing that I've seen for a footer, Thanks