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
Jonathan Grieve
Treehouse Moderator 91,253 PointsSticky 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 :)
2 Answers
Tim Knight
28,888 PointsJonathan,
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
Treehouse Moderator 91,253 PointsYes 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
28,888 PointsI 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.
Jacob Mishkin
23,118 PointsThe 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
Treehouse Moderator 91,253 PointsOkay 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 :)
Jacob Mishkin
23,118 PointsNot 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
Treehouse Moderator 91,253 PointsI've been seeing that in the last few days. I got my wires crossed, hence the confusion :)
Jacob Mishkin
23,118 PointsQuestion, why would you use a z-index for a footer with flexbox? I didn't see that in the video.
Jonathan Grieve
Treehouse Moderator 91,253 PointsZ-index was something i remembered from the CSS layout basics course. As was the calc() function.
Sherrie Gossett
14,924 PointsSherrie Gossett
14,924 PointsI 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.