ご利用の前に 質問・不具合報告 配布中のテンプレート

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告

[CSS]フッターを常に画面の下に固定する

久しぶりの更新な上に、ただの覚え書き(;´▽`)
ページ内の内容量が少なくても、高さを100%にする方法。


HTML


<body>
 <div id="container">
  <div id="main">
   <p>内容</p>
  </div>
  <div id="footer">
   Copyright © 2008 episode e*,All rights reserved.
  </div>
 </div>
</body>


containerボックスの中にmainボックスとfooterボックスが入っているのがポイント
特にmainボックスがミソ。


CSS


html {
height: 100%;
}

body {
height: 100%;
}

#container {
width: 780px; /* 任意の数値 */
margin: 0px auto;
position: relative;
height: 100%;
min-height: 100%;
}

body > #container {
height: auto;
}

#main {
padding-bottom: 60px; /* footerと同じ数値 */
}

#footer {
position: absolute;
bottom: 0px;
height: 60px; /* 任意の数値 */
width: 100%;
}


maiボックスの内容量が増えると、footerと重なってしまいます。
それを回避するために、mainボックスにpadding-bottomでfooterと同じ高さの余白を作ってあげます。
また、IE6とIE7にも対応するように指定しています(´・ω・`)b



──と、こんな感じで。
これでフッターが、常に画面の一番下にくるようになりますよヾ(。・ω・)ノ″


只今サイトの方を有料鯖に引っ越し&名前を変えるべく準備中。
その際に気になったので調べてみました(´・ω・`)



【 追 記 】
この方法、bodyに背景画像を指定しているとちょっと面倒なことになるようです。
詳細はこちらを参照してください
関連記事

CSS・(X)HTMLComment(0) |Trackback(0)

<<[CSS]背景画像がある場合のフッター固定 | ホーム | 【覚書】Photoshop CS3で真珠>>
   ※コメントは承認制です。














管理者にだけ閲覧を許可する

トラックバックURL
http://conveniweb.blog81.fc2.com/tb.php/2-e1f6a721
この記事にトラックバックする(FC2ブログユーザー)

| HOME |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。