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

CSS CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Gerald Susanteo
seal-mask
.a{fill-rule:evenodd;}techdegree
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Points
Posted by Gerald Susanteo
.a{fill-rule:evenodd;}techdegree
Gerald Susanteo
Front End Web Development Techdegree Student 7,117 Points

How do you setup sticky footer? i still quite dont understand that part and i have trouble adding it to my footer

My footer is in the text and so i would like to edit it and place it as a sticky footer below, how do i do that?

2 Answers

Tudor Matei
Tudor Matei
14,762 Points
Tudor Matei
Tudor Matei
14,762 Points

Hi Gerald, You can refer back to this lesson: https://teamtreehouse.com/library/creating-a-sticky-footer

Essentially you wrap everything but the footer in a wrapper div, then give it a min-height of calc(100vh- the footer height); — that will ensure the footer sticks to the bottom if the page is smaller than the whole window.

Hope this helps!

Gergely Bocz
Gergely Bocz
14,244 Points
Gergely Bocz
Gergely Bocz
14,244 Points

Hi Gerald!

You setup a sticky footer with the css position:sticky property. Keep in mind, that the footer in this case (as it usually is) is at the bottom of the page, so there really isn't a use for sticky position in the case of the footer. Sticky position is usually used for the header, in the case there is some content -like an image- that's above the navigation menu. If it's your intention for the footer to stay at the bottom of the window and be visible all the time, you can simply use fixed position. Here are some examples for you to see the difference between sticky and fixed position:

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

https://www.w3schools.com/howto/howto_css_sticky_element.asp

https://codepen.io/JGallardo/pen/lJoyk

Hope it helps, good luck!