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 Gabriel Ward
Gabriel Ward
20,222 Points

Sticky footer

Hi I have a site that I'm working on, and I'm unsure how to get a sticky footer for one of the pages. The page can be found here

http://www.letterbox-mag.com/?page_id=15

I have a div for the post content background, the height of which is set to auto. If I set it the height to 100%, the footer is sticky but then there's a big gap between the last sentence of the post and the footer.

Any help is much appreciated.

3 Answers

Brian Bush
Brian Bush
4,398 Points

Use a div tag to wrap everything but your footer. in your css for the div wrapper use this.

#wrapper {
   min-height: 100%;
   padding-bottom: [height of footer here];
   margin-bottom: [height of footer here];
 }

Also make sure that html and body css are set to this

html, body {
  height: 100%;
}

This works on pages with not enough content to push it to the bottom, while keeping your other pages with enough content to push the footer down the same. Hope this helps!

Gabriel Ward
Gabriel Ward
20,222 Points

Hi Brian,

Thank you for your help. I haven't been able to get this to work. You can see another example of it here

http://thehumananimal.net/about/

You would say the same thing for this page? There must be a height property setting I've put in that I'm overlooking...

Brian Bush
Brian Bush
4,398 Points
Brian Bush
Brian Bush
4,398 Points

I have not seen where you added a div wrapping all your content excluding your footer? Unless I missed it which could very well be.

for example your wrapper div should look like this. Its only css attributes should be the ones I listed above.

<body><div id="wrapper">

   // content goes here

</div>
<footer></footer>
</body>

As for the about page, your .postBackground class has its min-height set to 100% which is causing your height issue on that page.

Gabriel Ward
Gabriel Ward
20,222 Points

hmm ok, this is a wordpress theme, so I've got the #wrapper at the top of the page.php immediately after <?php get_header(); ?>

I'm not sure what I'm missing. I removed the height properties from .postBackground as well.

Brian Bush
Brian Bush
4,398 Points

I am not familiar with wordpress but you might want to try putting get_header() inside your #wrapper?

Your other comment disappeared but try the above first, then if that still doesn't fix it with min-height set to 100%, then just keep it at auto and make sure you test all browsers if possible to make sure it works on all of them.

Gabriel Ward
Gabriel Ward
20,222 Points

I removed that comment, as it seems I'd jumped the gun. It didn't work :(

Brian Bush
Brian Bush
4,398 Points

You need to have get_header() inside your #wrapper. When I just edited your website code in my broswer, if I added the #wrapper after the header, the page was too tall and you had to scroll down to see it. But it you include the header inside the #wrapper, it made the footer look like it was "stickied" to the bottom of the page.

If that makes sense.

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

I'm not sure I follow entirely. I'm really sorry about this. It's really frustrating.

Brian Bush
Brian Bush
4,398 Points

for example.

<body><div id="wrapper">

  <?php    get_header(); ?>

</div>
<footer>
</footer>
</body>