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系の背景になる
- 表示後にWindowの高さを変えた場合、IE8とOpera以外はフッターが下に張り付いたままだが、IE8とOperaはWindowに合わせて表示内容の大きさが変わってくれない(#bdの高さが変わらない)。IE8はjQuery1.3以降を読み込んでおけばこの現象を回避できるようだ
サンプル
ライセンス
MITライセンスで。
ダウンロード
ソースコード
@charset "UTF-8"; /** * Yahho Sticky Footer (Sticky Footer for YUI 2 Grids.css) * @see http://0-oo.net/sbox/css-small-box/yahho-sticky-footer * @version 0.1.3a * @copyright 2008-2011 dgbadmin@gmail.com * @license http://0-oo.net/pryn/MIT_license.txt (The MIT license) */ html, body{ height: 100%; } body{ margin-top: 0; margin-bottom: 0; } #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.txt · 最終更新: 2015/09/26 21:48 by dgbadmin