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 trialJeff Sanders
Courses Plus Student 9,503 PointsNot 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.
4 Answers
Steven Parker
231,110 PointsFor the requirements you describe, you'd probably prefer just fixed positioning:
footer {
position: fixed;
bottom: 0;
width: 100%;
}
Jeff Sanders
Courses Plus Student 9,503 PointsYes, 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.
Steven Parker
231,110 PointsEither way, the footer is always visible. 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.
Jeff Sanders
Courses Plus Student 9,503 Points"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.
Steven Parker
231,110 PointsWhen I said "either way", I was comparing the simple "fixed" method I suggested with yours which creates a scroll area above (and not including) the footer. These two methods meet the requirement of keeping the footer visible at all times.
I refer to my suggestion as "simple" because it uses only fixed positioning and does not require flexbox.
Jeff Sanders
Courses Plus Student 9,503 PointsGotcha. 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.
Steven Parker
231,110 PointsEither bottom padding or margin (on the main area) should make it possible to display all the main content by scrolling when there is a fixed footer.
Setting z-index should not be necessary if the footer is the last thing in the body.
Jeff Sanders
Courses Plus Student 9,503 PointsJeff Sanders
Courses Plus Student 9,503 PointsHey Steven, I figured out a way to do this while still using flexbox:
HTML
CSS
Steven Parker
231,110 PointsSteven Parker
231,110 PointsI think that's what they were after in the course. The advantage over the simpler fixed position is that the scrollable part doesn't pass under the footer.