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

Posted by Unsubscribed User
Unsubscribed User
4,513 Points

How do I get the footer to stick to the bottom of the page can you please give me some examples guys

I am building a website and for the life of me I cannot get this one right I would like the footer nav to be on the very bottom without overlapping the content when the window is smaller.

3 Answers

Mari Johannessen
Mari Johannessen
12,232 Points
Mari Johannessen
Mari Johannessen
12,232 Points

Hi! You should check out this guy's way of doing it, it looks a bit complex but it works great in all browsers: http://ryanfait.com/sticky-footer/.

Another method you can try out is 

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Hope it works out for you! :-)

Jeff Lemay
Jeff Lemay
14,268 Points

Mari, position:absolute will put the footer at the bottom of the webpage but it won't be fixed to the bottom of the window as the user scrolls the page.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Use position:fixed for the footer. You'll then want to add padding or margin equal to the height of the footer to the body element or wrapper of your page (.wrapper).

footer {
    position:fixed;
    bottom:0;
    left:0;
}
.content-wrapper {
     padding-bottom:100px; /* or whatever the height of the footer is */
}
Jeff Lemay
Jeff Lemay
14,268 Points

The padding/margin is added since position:fixed takes the footer out of normal flow (essentially taking up no space on the page).

Unsubscribed User
Unsubscribed User
4,513 Points
Unsubscribed User
Unsubscribed User
4,513 Points

Thank you guys I really appreciate it