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

Design

Mark Giles
Mark Giles
7,049 Points
Posted by Mark Giles
Mark Giles
7,049 Points

Go Down, Footer!

Does anyone have best practice advice for keeping a footer at the bottom of the page dynamically? I have played around with absolute position of the footer as well as padding in the center content area, but neither of those options seem to be ideal. In the case of absolute position, I have trouble centering the div, and in the case of fake padding, the site is too "tall" when it comes to a small screen.

Here is the test site I'm playing with to go through the CSS deep dive:

http://supergiles.ninja

If you view it on a small screen such as a smartphone, it looks normal. However, on the full view of a monitor, you'll notice a lot of space beneath the footer. Any ideas?

1 Answer

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

This is the best way to do it.

http://www.cssstickyfooter.com/

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

So it's really the html/body/wrap heights at 100%, the bottom padding, and the matching top-margin that make the magic happen, right?

James Andrews
James Andrews
7,245 Points

Yeah, just pretty much follow what they do in their example and make tweaks where you need too. amking sure that the margins and padding are adjusted in the same ways.