CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
フッターを画面下部に固定する方法（Opera 9.51対策含む）｜web bibo
CSSでレイアウトして、フッターを設置する際、コンテンツの量が少ないページの場合、フッターが画面の下から離れてしまいます。そこでフッターを画面下部に固定する方法を使います。 ただ、他サイトで色々な方法が載っていますがOpera 9.51だとレイアウトが崩れることがわかりました。 まずは下記ソースをご覧ください。 HTMLコード <div id="container"> <div id="header">ヘッダー</div> <div id="contents"> <h1>タイトル</h1> <p>コンテンツ</p> </div> <div id="footer"><p>フッター</p></div> </div> CSSコード * { margin: 0; padding: 0; } html,body { height: 100%; background-color: #222222; t
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
