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

Drew Butcher
Drew Butcher
33,160 Points
Posted by Drew Butcher
Drew Butcher
33,160 Points

Why not give the footer element margin-top: auto; ?

seem like you could have given body the properties display: flex; flex-direction: column; min-height: 100vh; and then given footer the property margin-top: auto;. Does anyone see a problem with this solution?

body{
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}
footer{
    margin-top: auto;
}

4 Answers

Domagoj Kirigin
Domagoj Kirigin
16,392 Points
Domagoj Kirigin
Domagoj Kirigin
16,392 Points

You then have a white space between .row and footer because .row did not stretch out to the full available space. Try to apply a red border to the .row so you can see where it stretches.

So if you want white space between content and footer it is ok.

Job Thomas
Job Thomas
9,441 Points
Job Thomas
Job Thomas
9,441 Points

I used the same approach and seems indeed to work just as nice (I targetted .main-footer, but with the same styles).

Brandon Pierce
Brandon Pierce
3,100 Points
Brandon Pierce
Brandon Pierce
3,100 Points

I thought the same thing and took the same approach. Was an answer ever received as to why the approach offered in the video is preferable to margin-top: auto; ?

Matthew Brock
Matthew Brock
16,791 Points
Matthew Brock
Matthew Brock
16,791 Points

"auto" only works on the margin-left and margin-right properties.

Drew Butcher
Drew Butcher
33,160 Points
Drew Butcher
Drew Butcher
33,160 Points

My question was not if this would work or not, here is a jsfiddle if you need to see that this works: https://jsfiddle.net/13f4pvcf/1/

My question was what are the advantages/disadvantages to creating a sticky footer this way.

It seems a little easier then the method that was given by Guil Hernandez in the video.

Benjamin Gooch
Benjamin Gooch
20,367 Points
Benjamin Gooch
Benjamin Gooch
20,367 Points

That's incorrect. A video or two ago Guil shows how to use an auto top margin to position something at the bottom of a div.