更新履歴とコメントはゼロと無限の間のログ » Yahho Sticky Footerでどうぞ。

WebブラウザのWindowサイズにかかわらず、フッター部分をページの下端にくっつける、いわゆるスティッキー・フッター。
ページのコンテンツが多い場合は普通にコンテンツの下にフッターを表示し、コンテンツが少なくてもページの下側にくっつく。

A CSS Sticky Footerのように「div.push」を入れるのは少し面倒。
それに、愛用しているYUI CSS Framworkを使いたい。YUI Grids.cssでは、コンテナの中にフッターが入っている。

と、いうことで、YUI CSS Grids.cssでSticky Footerを実現するCSSを作った。

• フッターの高さはサイトごと（あるいはページごと）に設定が必要
• フッターの高さが小さすぎると、Firefoxでなぜか下側に余白ができてしまう
• div#doc系の上下に枠線があると、枠線の太さの分だけはみ出す（スクロールバーが表示される）ので上下の枠線は無い方が良い
• div#bdは伸びない。コンテンツが少ない場合、コンテンツとフッターの間の背景はdiv#doc系の背景になる

Yahho Sticky Footerのサンプル

MITライセンスで。

YahhoStickyFooter.css

@charset "UTF-8";
/**
 *  Yahho Sticky Footer ( for YUI Grids.css )
 *  @see       http://0-oo.net/sbox/javascript/yahho-sticky-footer
 *  @version   0.1.0a
 *  @copyright 2008 dgbadmin@gmail.com
 *  @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
 */
 
html, body{
    height: 100%;
}
div#doc, div#doc2, div#doc3, div#doc4{
    position: relative;
    min-height: 100%;
    _height: 100%;	/* for IE6 */
}
div#ft{
    position: absolute;
    bottom: 0;
    width: 100%;
}
 
/* フッターの高さはサイトに合わせて変える */
div#bd{
    padding-bottom: 3em;	/* フッターの高さより大きくする */
}
div#ft{
    height: 3em;
}