ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。
![[image]理想と現実](http://blog.sakurachiro.com/wp-content/uploads/2010/09/20100928-1.png "理想と現実")
つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。
DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。
試してみたhtml構造
|
1 |
div#wrap>div#top+div#header+div#contents+div#footer |
指定したcss
|
1 2 3 4 |
html, body { height:100%; } #wrap { position:relative; min-height:100%; background:#f33;/*確認用*/} #contents { padding:1em 0 3em;/*コンテンツとフッターの位置調整*/ } #footer { position:absolute; bottom:0; left:0; width:100%; height:3em; line-height:3em; } |
全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。
これで問題ないかな？
なにか見落としてる気がしてならない。
出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。
あと各ブロック毎に横幅いっぱいの背景を指定するのに
[text]div#wrap>div.inner[/text]みたいにした。
ソース見づらい。
コメント