ゼロと無限の間に

フリーでオープンソースな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系の背景になる
  • 表示後にWindowの高さを変えた場合、IE8とOpera以外はフッターが下に張り付いたままだが、IE8とOperaはWindowに合わせて表示内容の大きさが変わってくれない(#bdの高さが変わらない)。IE8はjQuery1.3以降を読み込んでおけばこの現象を回避できるようだ

サンプル

ライセンス

ダウンロード

ソースコード

@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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki