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

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

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

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

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

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

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
16,608 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.