BLOG

floatしたサイドバー等の高さ100%表示

floatさせたサイドバーなどにbackground-colorで色をつけたりした場合、コンテンツの高さで切れてしまう。

コレ、floatあるあるってやつ。

モダンブラウザであれば、
floatさせる要素を内包する範囲で、

min-height: 100%;
height: auto !important;
height: 100%;

を指定してやることで、まあうまくいく。

問題はIEなのだ、結局。

そこで、clearfixだのなんだのをシノゴノ考えず、行き着いたベストな対処法は、

全要素を内包する範囲、コイツ自体をfloatさせ、background-imageで背景画像をリピートしてやればいい、というだけのこと。

あらカンタン。

タグ:

Comments