CODEWITHSUNDEEP
csssticky-footer
realph
realph

Reputation: 4671

Sticky Footer Not Working Properly

I've followed Ryan Fait's sticky footer example and for some reason my footer, while sticky, is clipping through the rest of the divs when you reduce the height of the browser. Anyone know why this is, I'm obviously missing something, I haven't ran into this problem before.

Link: http://lithbeauty.com/test/

Upvotes: 2

Views: 1908

Answers (3)

Ian Campbell
Ian Campbell

Reputation: 2748

I've found that the CSS sticky-footer approach is deceptively simple, a nightmare really. @Yusef's solution above is much more straightforward. I made a variation on this that also implements this Javascript code:

function setFooter()
{
    var footer = document.getElementById("footer");

    var innerWidth = window.innerWidth;
    var offsetWidth = document.body.offsetWidth;

    var scroll = innerWidth - offsetWidth;

    if(scroll != 0)
    {
        footer.style.position = "relative";
    }
    else
    {
        footer.style.bottom = 25 + "px";
    }
}

As long as Yusef's CSS for the footer also contains clear: both;, when there is no scrollbar in the window the footer div will automatically align below the main-content div (and also set onload = "setFooter();" in the html body tag).

If there is a scrollbar in the window, the difference calculated by the scroll variable will be the integer amount that overflows (see my question for more info: Why are scrollTop, pageYOffset, and height all not working?).

Watch these videos for implementing wrapper, main-content, and footer divs: http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv

Upvotes: 1

Yusuf
Yusuf

Reputation: 177

#wrapper{
    position:relative;
    height:auto;
    min-height:100%;
}
#footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}

Upvotes: 1

Luke
Luke

Reputation: 36

You need to clear your floats. Just add clear:both to your .push class. Also, you should remove the top margin and padding on your wrapper because it's forcing the height beyond 100% and creating an unnecessary scroll.

Upvotes: 1

Related Questions