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

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?

Gergely Bocz
Gergely Bocz
Treehouse Moderator 12,199 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!

Tudor Matei
Tudor Matei
10,643 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!