ゼロと無限の間に

フリーでオープンソースなJavaScriptとかPHPとか。

ユーザ用ツール

サイト用ツール


css-small-box:yahho-sticky-footer

文書の過去の版を表示しています。


YUI Grids.cssのフッターをページの下側にくっつけるスタイルシート - Yahho Sticky Footer

更新履歴とコメントはゼロと無限の間のログ » 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系の背景になる

サンプル

ライセンス

ダウンロード

ソースコード

@charset "UTF-8";
/**
 *  Yahho Sticky Footer ( for YUI Grids.css )
 *  @see       http://0-oo.net/sbox/javascript/yahho-sticky-footer
 *  @version   0.1.0
 *  @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;
}
css-small-box/yahho-sticky-footer.1217600296.txt.gz · 最終更新: 2008/08/01 23:18 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki