Ryan Kanno: The diary of an Enginerd in Hawaii

My co-worker, Stephen, and I have implemented our layouts using the Yahoo! UI Grids library. One of the dilemmas we’ve been facing is the inability to use Cameron Adams’ footerStickAlt CSS solution @ The Man In Blue.

Basically, footerStickAlt is best described as

sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.

Fast forward to the present, and using JQuery, JQuery Dimensions plugin, and a little nifty Javascript, we wrote up a solution at work for our Yahoo! layouts. One thing to remember is that this solution won’t work in browsers with Javascript disabled, i.e. it degrades to whatever Yahoo! grid layout you’re using.

It’s been tested in IE 5.5+ and Firefox 2. (I think =P).

*Note*: In this implementation, I don’t check for the margin on the ‘body’ element since we’ve set all our margins and padding on to 0. See the demos for details.

Requirements

1. Yahoo! UI Grids [download]
2. JQuery 1.1.2+ [uncompressed] [compressed]
3. Dimensions plugin 1.0.0-b2 [zip]
4. The Javascript below in a file of your choosing! Don’t forget to include it in your page!

$(document).ready(function() {
     if ($(window).height() > $(document).height()) {
          $('#bd').css({
               height: $('#bd').height() +
                         ($(window).height() -
                          $(document).height()) + 'px'
          });
     }
});

Check out the demos here: page with short content, page with long content!

Enjoy!