ブラウザの高さに対してコンテンツ量が足りない時、
フッターの下に隙間が空いちゃって、薄っぺらい感じになっちゃうのを回避したい。

[image]理想と現実

つまり、コンテンツの中身が足りない時はフッターをブラウザ(ウィンドウ)下部に固定したい。

DEMO / コンテンツ量が少ないページでも、フッターをブラウザ下部に表示させるテスト。

試してみたhtml構造

指定したcss

全体を包むdiv#wrapの最低限確保する高さを100%にして
#footerをbottom:0に絶対配置。

これで問題ないかな?
なにか見落としてる気がしてならない。

出来たら#wrapのheightを100%にしたいんだけど
そうするとスクロールした時に#footerが移動しちゃう。

あと各ブロック毎に横幅いっぱいの背景を指定するのに
[text]div#wrap>div.inner[/text]みたいにした。
ソース見づらい。


One thought on “コンテンツの高さが少なくてもフッターをブラウザ下部に表示させる

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.