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
Not a viable solution when the sticky footer must always be visible at the bottom of the viewport.
A sticky footer by definition is a footer that sticks to the bottom of the viewport and not the bottom of content. However, when there is more content than can fit within the viewport, a sticky footer is pushed out of view. There are cases when the requirement is that the footer is visible at the bottom of the viewport at ALL times.
In the video, it appears that this a viable solution for that special case I mentioned above; however, the reason that it works is because there is limited content in the div.row. If you add more content to div.row, the footer no longer sticks to the bottom of the viewport. If you need your footer to be viewable at all times, this isn't what you'd want.
Steven Parker229,005 Points
For the requirements you describe, you'd probably prefer just fixed positioning:
Yes, indeed. However, there are cases when content needs to pass under a footer. For example, if an app uses the footer as a bar that both indicates that a user is in edit mode (editing some data that is otherwise in Readonly mode) and contains buttons such as "Exit" and "Save", then in that case the footer needs to be visible at all times and content would need to pass under said footer.
"Either way, the footer is alway visible"
Incorrect, in Guil's example, the footer is visible unless the main content exceeds the height of the viewport height. In that case, the footer is not always visible. A user would have to scroll until the end of the content to see the footer. The footer would only stick to the bottom of the viewport if the content was less than the combined remaining height of the the footer and empty space. Guil's solution works fine if you don't need to see the footer when the main content exceeds the height of the viewport. It does not suffice in my requirement that I explained above.
To test this, paste more content into div.row.
"But with the simple approach the scroll area includes where the footer is, and with the flexbox method the scroll area is above, but not including, the footer."
Not sure what you mean by "simple" approach. I assume you are referring to Guil's solution. In Guil's solution, all child elements of the body (header, banner, .row content, and footer) are scrollable, yes. That is not what is required in my example that I explained above. In the example I explained, the footer must ALWAYS be visible and main content must scroll below it. In my posted solution, I also use the flexbox method, but the scrollable area is only the banner and .row content to meet my requirement. The flexbox method alone does not require that the scrollable content must include all body content, including the footer.
Depending on the requirement, neither Guil's nor my solution is wrong. Our solutions meet different requirements. My argument is not that Guil is wrong, but that it doesn't meet the requirement I proposed.
Gotcha. Did you try yours? What was your solution for making the content scrollable? The first thing I noticed missing was a z-index so I added a z-index of 1000. However, additional main content remains hidden under the footer. I also added bottom padding that equaled the height of the footer, but sill couldn't scroll to see all of the main content.