Search code examples
csspositioningfooter

Footer sitting too far up page

My footer sits where I want it to when there is enough content above it to 'push' it to the bottom of the page (http://v3.edharrisondesign.com/), but without content it sits too far up (http://v3.edharrisondesign.com/about/).

Any ideas why?

Solution

  • If you search google for sticky footer you'll find that this is a common problem with a few solutions. Anyway, I took a look at your site and here's what you need to do:

    1) to the html's ruleset, add this:

    height: 100%;

    2) body's ruleset:

    -moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-height: 100%;
padding-bottom: 80px; /* same as footer's height */

    3) footer:

    position: absolute;
bottom: 0; /* you already have this */

    This solution takes advantage of the box-sizing property. If supporting older browsers is a requirement, it won't work - you'll need an extra element in the html for that (let me know if this is what you want).

    Great looking site, btw!