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 2 Grids.css ) * @see http://0-oo.net/sbox/css-small-box/yahho-sticky-footer * @version 0.1.2a * @copyright 2008-2010 dgbadmin@gmail.com * @license http://0-oo.net/pryn/MIT_license.txt (The MIT license) */ html, body{ height: 100%; } body{ margin: 0 auto; } #doc, #doc2, #doc3, #doc4, #custom-doc{ position: relative; min-height: 100%; _height: 100%; /* for IE6 */ } #ft{ position: absolute; bottom: 0; width: 100%; } /* フッターの高さはサイトに合わせて変える */ #bd{ padding-bottom: 3em; /* これはフッターの高さより大きくする */ } #ft{ height: 3em; }
css-small-box/yahho-sticky-footer.1270820829.txt.gz · 最終更新: 2010/04/09 22:47 by dgbadmin