今回は簡単なCSSのチップスをご紹介します。 CSSで、要素の高さの最小値を指定するのは「min-height」です。  

min-heightの使いどころ

コーディングをする方ならわかると思いますが、 高さの最小値を指定するプロパティ「min-height」…意外と使いどころが多いですよね。
例えば、左右の要素が並んでいて、ちょうど同じ高さにして綺麗に並べたい場合や、 とりあえず領域を確保しておきたい場合など…。 「height」で指定してしまうと要素の中のコンテンツが多くなったり、ブラウザの機能で文字サイズが大きくされた時にコンテンツが指定した要素から溢れてしまうことがあるので、やはり「min-height」の方がベターです。

クロスブラウザ対応

残念ながらこの「min-height」はIE6では動作しません。 ですので、IE6にも対応した記述法をしなければなりません。 結論から書きますと以下のように記述します。

#box {
min-height: 100px;
height: auto !important;
height: 100px;
}

これで「box」という要素は最低でも100pxの高さをもつことができます。
firefoxやIE7以上のブラウザは、「min-height: 100px;」と「height: auto;」を読み込みます。
本来なら下に書いたプロパティの方が優先されますが、「!important」を指定したことにより、 「height: auto」が優先されます。

そして肝心のIE6ですが、まず「min-height: 100px;」ですが、こちらのプロパティは先に書いたようにIE6は非対応ですので無視されます。
それではfirefoxと同じように「!important」がついている「height: auto」が読み込まれるように思えますが、 IE6は「!important」も非対応のため、これも無視され、「height: 100px;」が読み込まれます。
これだとただの「height」を読み込んだだけに見えますが、 実はIE6は要素の中身のコンテンツが指定してある「height」よりも大きくなった場合、勝手に「height」の値を変更する仕様になっています。

つまり、IE6の「height」は他のモダンブラウザの「min-height」とほぼ同じ意味になるのです。 そんなわけで上記のコードでハックを使わずにIE6にも対応した「min-height」が書けましたとさ。      

jQueryで書いてみよう

jQueryで「min-height」を使わずに要素の高さの最小値を指定してみます。

var h = $(‘#box’).height();
if (h < 100) {
$(‘#box’).css(‘height’,’100px’);
}

「min-height」があるのでこんなコードは実際には使いませんけどね…。