min-heightをIE6で実現
こんにちは、ゼノフィ渡部です。
min-height(高さの最小値)をCSSのみでIE6でも実現する方法をご紹介いたします。
下記のソースはサンプルで使用しているCSSで、min-heightに直接関係している部分だけを抜粋しています。
2行目で記述されているのは、普通の「min-height」プロパティです。3行目の「height: auto !important;」は4行目の「height: 150px;」によるモダンブラウザでの、高さ固定を打ち消すために使用しています。4行目の「height: 150px;」で、IE6での高さの最小値を疑似的に表現しています。4行目の「height: 150px;」でIE6で「height: auto !important;」の影響もなく、min-heightの動きが実現できる理由は、IE6ではブロック要素に高さや幅を指定しても内容の量に合わせて要素の大きさが変わってしまう、同じセレクタ内では「!important」が無視される、というバグを利用しています。
1 2 3 4 5 | div.min_h { min-height: 150px; /* モダンブラウザ用 */ height: auto !important; /* モダンブラウザ用 */ height: 150px; /* IE6用 */ } |
150px内でテキストが収まっている例と150pxを超えるテキストの量を記述している2パターンのソースを記述しています。
1 2 3 4 5 6 7 | <div class="min_h"> 高さの最小値 </div> <div class="min_h"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> |
サンプルを見ると150pxの高さまで内容がなくとも、背景が表示され、150px以上の内容があっても背景が切れることなく追従していることから、「min-height」プロパティが実現していることがわかります。
CSS
1 2 3 4 5 6 7 8 9 10 | div.min_h { float: left; width: 200px; min-height: 150px; /* モダンブラウザ用 */ height: auto !important; /* モダンブラウザ用 */ height: 150px; /* IE6用 */ margin: 0 40px 40px 0; padding: 10px; background: #EFEFEF; } |
HTML
1 2 3 4 5 6 7 | <div class="min_h"> 高さの最小値 </div> <div class="min_h"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> |
