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系の背景になる
サンプル
ライセンス
MITライセンスで。
ダウンロード
ソースコード
@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