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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 85,758 Points

Sticky footer: Are we encouraged to solve this ourselves?

I'm not sure I followed this correctly, is this a working fix for the flexbox sticky footer? I feel like I missed an explanation here.

For example, do we put a z-index on the footer to get the affect to work and the use the calc() function to subtract the height of the footer from the viewport height?

Just want to clear up a confusion :)

I think the link to calc() was just a "related" content link, given that he mentioned it in passing in the video. This flex solution is clean and simple.

2 Answers

Tim Knight
Tim Knight
28,861 Points

Jonathan,

He goes into solving this with Flexbox in the video at 3 minutes in... it doesn't include any of the older concepts that you might have learned in the CSS Layout course.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,758 Points

Yes I'm with Guil up to that bit,

But then he demonstrates that the expanded text he then experiments with still goes above the sticky footer. That's the bit I'm asking about. :-)

I noticed he included a link to calc() in the teachers notes too.

Tim Knight
Tim Knight
28,861 Points

I just watched that portion again on https://teamtreehouse.com/library/css-flexbox-layout/building-a-layout-with-flexbox/creating-a-sticky-footer-with-flexbox and everything is working correctly in his example. He adds additional text to the footer to show that you don't have to consider the height of the footer. I think the teacher's notes on calc() and the other one on "Creating a Sticky Footer" or just for reference in how you would do it without flexbox.

The expanded text is placed inside the footer element, what he is describing is using the vh unit on the body element, so the text stays inside the viewport's height.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,758 Points

Okay I get it now, after watching the video again just now. Obviously I wasn't paying enough attention before. I thought the text was being added to the body and overflowing above the footer.

I didn't see that the text was actually part of the footer.

I understand now. No need for calc or z-index. Thanks for putting me right :)

Not a problem man, yeah with flex box there is no need or any of that stuff. that's what makes it so popular.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,758 Points

I've been seeing that in the last few days. I got my wires crossed, hence the confusion :)

Question, why would you use a z-index for a footer with flexbox? I didn't see that in the video.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 85,758 Points

Z-index was something i remembered from the CSS layout basics course. As was the calc() function.