Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Footer won't stick to the bottom of the page

I'm creating a new responsive mobile version of my portfolio from one of the tutorials and I don't have much content on my any of my pages. My footer keeps showing up in the view port. I've tried positioning the footer to absolute. This allows the footer to be at the bottom of the page but then there's a bunch of white space between section and footer on some of my pages.

Here's what my footer code looks like:

footer{ font-size: 0.90em; text-align: center; clear:both; bottom: 0; height: 20px; }

even added:

header{ margin: 0; padding:0; height: 100%; }

I started my wrapper div just before <section> </section> in my code so that the header extends across the top of the page but the content would be in the middle of the page. I just can't seem to get the footer to stick to the bottom. I've tried placing the footer outside of the wrapper div. I've also checked out http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page blog but not understanding it since i'm using html 5 elements to replace divs ex: header, nav, section, footer....

Can any please help? Sorry if this sounds confusing by the way.

3 Answers

Adam Duffield
Adam Duffield
30,494 Points

Try making sure that your other containers above the footer have a height of 100% like your body, wrapper and any others, if that doesn't help are you using floats at all? I'm not a master of using the positioning tags but I know what I'm doing with floats!

Marcus Tisäter
Marcus Tisäter
4,886 Points

If you don't have that much of content have it positoned fixed to the bottom, that would look nice. You should try that and also it makes sure it will stay on the bottom if you position it there as well.

I got it to work! I actually just forgot to put my container div around all of my positioning tags and then position the footer to absolute.

Still working on it but, looks good on mobile portrait view. Thanks!