ゼロと無限の間に

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

ユーザ用ツール

サイト用ツール


css-small-box:yahho-sticky-footer

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン
前のリビジョン
css-small-box:yahho-sticky-footer [2008/08/01 22:51] – 作成 dgbadmincss-small-box:yahho-sticky-footer [2015/09/26 21:48] (現在) – [ダウンロード] dgbadmin
行 1: 行 1:
 ====== YUI Grids.cssのフッターをページの下側にくっつけるスタイルシート - Yahho Sticky Footer ====== ====== YUI Grids.cssのフッターをページの下側にくっつけるスタイルシート - Yahho Sticky Footer ======
 +
 +更新履歴とコメントは[[http://0-oo.net/log/category/css-small-box/yahho-sticky-footer/|ゼロと無限の間のログ » Yahho Sticky Footer]]でどうぞ。;-)
  
 {{:css-small-box:chain.jpg|}} {{:css-small-box:chain.jpg|}}
行 17: 行 19:
   * div#doc系の上下に枠線があると、枠線の太さの分だけはみ出す(スクロールバーが表示される)ので上下の枠線は無い方が良い   * div#doc系の上下に枠線があると、枠線の太さの分だけはみ出す(スクロールバーが表示される)ので上下の枠線は無い方が良い
   * div#bdは伸びない。コンテンツが少ない場合、コンテンツとフッターの間の背景はdiv#doc系の背景になる   * div#bdは伸びない。コンテンツが少ない場合、コンテンツとフッターの間の背景はdiv#doc系の背景になる
 +  * 表示後にWindowの高さを変えた場合、IE8とOpera以外はフッターが下に張り付いたままだが、IE8とOperaはWindowに合わせて表示内容の大きさが変わってくれない(#bdの高さが変わらない)。IE8はjQuery1.3以降を読み込んでおけばこの現象を回避できるようだ
  
- +===== サンプル ===== 
-==== サンプル ===== +[[http://0-oo.net/sam/yahho-sticky-footer/|Yahho Sticky Footerのサンプル]]
-[[http://0-oo.net/sam/yahho-sticky-footer|Yahho Sticky Footerのサンプル]]+
  
  
行 28: 行 30:
  
 ===== ダウンロード ===== ===== ダウンロード =====
-[[http://0-oo.net/css/YahhoStickyFooter.css|YahhoStickyFooter.css]]+[[http://g.0-oo.net/yahho-sticky-footer.css|yahho-sticky-footer.css]]
  
  
行 35: 行 37:
 @charset "UTF-8"; @charset "UTF-8";
 /** /**
-  Yahho Sticky Footer ( for YUI Grids.css ) +  Yahho Sticky Footer (Sticky Footer for YUI Grids.css) 
-  @see       http://0-oo.net/sbox/javascript/yahho-sticky-footer +  @see       http://0-oo.net/sbox/css-small-box/yahho-sticky-footer 
-  @version   0.1.0 +  @version   0.1.3a 
-  @copyright 2008 dgbadmin@gmail.com+  @copyright 2008-2011 dgbadmin@gmail.com
   @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)   @license   http://0-oo.net/pryn/MIT_license.txt (The MIT license)
  */  */
行 45: 行 47:
     height: 100%;     height: 100%;
 } }
-div#doc, div#doc2, div#doc3, div#doc4{+body{ 
 +    margin-top: 0; 
 +    margin-bottom: 0; 
 +
 +#doc, #doc2, #doc3, #doc4, #custom-doc{
     position: relative;     position: relative;
     min-height: 100%;     min-height: 100%;
-    _height: 100%; /* for IE6 */+    _height: 100%;  /* for IE6 */
 } }
-div#ft{+#ft{
     position: absolute;     position: absolute;
     bottom: 0;     bottom: 0;
行 57: 行 63:
  
 /* フッターの高さはサイトに合わせて変える */ /* フッターの高さはサイトに合わせて変える */
-div#bd{ +#bd{ 
-    padding-bottom: 3em; /* フッターの高さと同じ高さ */+    padding-bottom: 3em;    /* これはフッターの高さより大きくする */
 } }
-div#ft{+#ft{
     height: 3em;     height: 3em;
 } }
 </code> </code>
  
css-small-box/yahho-sticky-footer.1217598697.txt.gz · 最終更新: 2008/08/01 22:51 by dgbadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki