Use jQuery to Automatically Size your Footer Height
Hi Again, it’s been a while, we’ve been busy! Moved twice and had a baby! Oh the time flies.
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);
});
March 21st, 2010 at 12:02 am
[...] How to automatically use jQuery to size your footer Height [...]
March 21st, 2010 at 8:00 pm
[...] How to automatically use jQuery to size your footer Height [...]
May 18th, 2010 at 8:31 am
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”;