Footer placement?

This post will give a little description about how you could place a footer at the bottom of a HTML page, but because I don’t like the way I am currently doing it, please let me know if you have any better solutions.

The requirements for the footer placement are the following:

• Footer should be at the bottom of the page when the page is higher then the browser viewport.
• Footer should be at the bottom of the browser viewport if the page is smaller then the browser viewport. No scrollbar should be shown.
• Footer has a 100% width
• Browser resizing and AJAX actions in the webpage that change the page height should update the footer position.

At the moment I am using a JavaScript solution that uses the jQuery 1.2.3 library. You can check it out on this page: ilocal.nl.

It uses the following JavaScript and CSS code:

$(window).ready(function() {
  setFooterPosition();
});
$(window).resize(function() {
  setFooterPosition();
});
function setFooterPosition() {
  $("#footer").hide();
  if ($(window).height() - 65 < $("body").height()) {
    $("#footer").css("top", ($("body").height() + 1) + "px");
  } else {
    $("#footer").css("top", ($(window).height() - 65) + "px");
  }  if ($("#header").width() > 996) {
    $("#topbanner").css("width", $("#header").width() + "px");
  } else {
    $("#topbanner").css("width", "996px");
  }  $("#footer").css("width", $(document).width() + "px");
  $("#footer").css("left", "0px");  $("#footer").show();
}

#footer {
  position: absolute;
  display: none;
  height: 53px;
  z-index: 0;
}

Please note that earlier versions of jQuery don’t work with this code, so it’s important to use 1.2.3. You might also notice that there is some difference between the offset height that I am using in the JavaScript, and the height of the footer, this is because I want a small margin between the content on the page and the footer.

This entry was posted on Sunday, March 23rd, 2008 and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.