I was working on a project lately and came across a problem that I couldn’t find a solution for online, so I made on myself.

I needed to change the height of the footer to equal the remainder of the space between the bottom of the page and the bottom of the window. Most of the things you search for in jQuery tell you how to stick your footer to the bottom of the window, but this actually doesn’t move your footer, but changes the height to whatever that space is + the height of the footer.

Feel free to use it! Let me know if you have any questions!

$(window).bind("load resize", function() {
    var footerHeight = 0,
    footerTop = 0,
    footer = $("#footer");
    positionFooter();
    function positionFooter() {
        footerHeight = footer.height();
        footerTop = ($(window).height()-$(body).height()+.footerHeight() "px";
        footer.css({height: footerTop})
    }
    $(window).resize(positionFooter);
});
  1. Line 8: footerTop = ($(window)…
    there are some mistakes (probably since new jquery versions or so)..
    1) (body) won’t work without quotes, basicly (“body”);
    2) footerHeight has to be added, therefore needs a + before
    3) same as 2nd applies for “px”

    result: footerTop = ($(window).height() – $(“body”).height() + footerHeight) + “px”;

    🙂 Have fun!

    Tom