Menu icon Foundation
Jumping Footer

I'm using a sticky footer on a site that works well for the most part ... but when a page is loading, if the content isn't tall enough to push the footer to the bottom, it will typically first appear up under the content and not "stuck" to the viewport bottom like it's supposed to be. Once the page is done loading, it jumps to the bottom.

Suggestions as to how I might be able to avoid the "jump" and have it appear in the correct spot to start with?

Using this script

<script>
  $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
            

         

sticky footer

I'm using a sticky footer on a site that works well for the most part ... but when a page is loading, if the content isn't tall enough to push the footer to the bottom, it will typically first appear up under the content and not "stuck" to the viewport bottom like it's supposed to be. Once the page is done loading, it jumps to the bottom.

Suggestions as to how I might be able to avoid the "jump" and have it appear in the correct spot to start with?

Using this script

<script>
  $(window).bind("load", function () {
    var footer = $("#footer");
    var pos = footer.position();
    var height = $(window).height();
    height = height - pos.top;
    height = height - footer.height();
    if (height > 0) {
        footer.css({
            'margin-top': height + 'px'
        });
    }
});
            

         
dims almost 5 years ago

you try giving the content div a min height using the min-height css property ..

Marc McGee almost 5 years ago

Try Wing Hou Chan's most excellent solution. Scroll to the end of the forum post at http://foundation.zurb.com/forum/posts/2896-row-height

Apply doc fill to your bottom div to expand it to fill the remainder of the page, on those pages with not enough content. Aside from absolutely being the coolest, it may very well solve the issue you are having.