CSSでフッターを最下に配置
なんかいろいろなところにサンプル
とりあえず、覚書メモ
サンプル
html
<!DOCType html> <html> <head> <meta charset="utf8" /> <title>CSSサンプル</title> <link href="./css/main.css" type="text/css" rel="stylesheet"> </head> <body> <div id="wrap"> <header> ヘッダー </header> <div id="contents"> <div class="content-data"> <ul> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> <li>あああああああああああああああ</li> </ul> </div> </div> <footer id="footer"> <div class="copyright"> フッター </div> </footer> </div><!-- wrap --> </body> </html>
css
@CHARSET "UTF-8"; *{ margin: 0px; padding: 0px; } html,body{ height:100%; } body{ background-color: #CCCCCC; } #wrap{ width: 100%; position: relative; height:auto !important; /*IE6対策*/ height: 100%; /*IE6対策*/ min-height: 100%; width: 900px; margin: 0px auto; background-color: #FFFFFF; } #wrap header{ height: 80px; background-color: #98EAFF; } #contents{ padding: 10px; padding-bottom:80px; /*フッターの高さと同じ*/ } #contents ul{ padding-left: 20px; } #footer{ height:80px; position:absolute; bottom:0; right: 0px; width: 900px; background-color: #98EAFF; } #footer .copyright{ right: 0px; position: absolute; }
結果(下スクロールする場合)
結果(1ページ以内に収まる場合)
参考にさせていただたページ
まとめ
positionのrelative、absoluteをうまく利用することで対応できる。
あと、フッターの部分を調製するためにpadding-bottomを利用する。他にも方法はありそうだが
今回はこの方法で覚える。
うーん
tabでかいたら結構崩れるな…これがいやだからインデントはスペース派がいるということだな。