ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。
![[image]理想と現実](/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:1em03em;/*コンテンツとフッターの位置調整*/} #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]みたいにした。
ソース見づらい。
One thought on “コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる”