フッターをブラウザ下部に固定する

フッターをコンテンツが少なくてもブラウザの下に固定しておく方法。

一番簡単なのがposition:fixedで固定してIE6無視かしら(笑) 仕方がないから、IE6対策を…って考えてるとややこしいんですよねえ。

CSSでやるのが、多分有名なこちら
→css sticky footer
 「フッター  固定」みたいな感じでググると同類のがわらわらと見つかります。
(でもここの本家のサイトが一番分かりやすい気がする)

メインコンテンツをclearfixで固定しておいて、フッターをネガティブマージンでメインコンテンツの上に上げてやる、という感じでしょうか。

 今この記事を書くために調べていたら、clearfixを使わずにやってるのを発見。探せばまだありそう。
 →福井のホームページ制作・携帯サイト制作・SNS/ビジネスブログ構築 からくり屋のブログ CSSでフッターを固定する

ああでも、こんなの考えてるより、やっぱりposition:fixed のIE6対策を考えてる方がラクだよなあと思う。
で、もっとお手軽にフッター固定を実現できるJavaScriptライブラリ。
→to-R footerをウィンドウ下部に固定する『footerFixed.js』

固定したい部分のidをfooterと名前を付けるだけ。簡単。一つの手段として覚えておくと役立つ…かなあ…。

<追記>
間違えた。position:fixedにしちゃうと、ページに縦スクロールが発生した場合に困る。
全体囲むDIVタグにをposition:relativeを指定。min-height: 100%にしておく。padding-bottomをフッターの高さにする。
で、フッターのボックスをposition:absoluteにして、bottom:0px;を指定。
原則はこれなんですよね。原則は。

本日のMySQLメモ。
INSERT,UPDATE,DELETE,トランザクションの制御。
先日のGROUP BY句の謎に関して、MySQL独自のものらしいが、グループ化しなかったカラムをSELECTしちゃうと、そのカラムの値は意味がないものになる。らしいです。ややこしいなあ、もう!

コメントをどうぞ

トラックバックURL

http://deepskyblue.ciao.jp/diary/web/post_6.html/trackback

Page : 1 / 11

ページトップへ戻る