ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。
つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。
DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。
試してみたhtml構造
[html classname=”html-sh”]div#wrap>div#top+div#header+div#contents+div#footer[/html]
指定したcss
[css classname=”css-sh”]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; }[/css]
全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。
これで問題ないかな?
なにか見落としてる気がしてならない。
出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。
あと各ブロック毎に横幅いっぱいの背景を指定するのに
[text]div#wrap>div.inner[/text]みたいにした。
ソース見づらい。
コメント