ブロック要素の最低縦幅を簡単に指定できる「min-height」をIE6にも実装する方法

サイトを作っていると、
ヘッダー、グローバルナビ、フッターなど、
共通のコンテンツはそれぞれあると思います。

問題は中身のコンテンツ。
ページによってものすごくボリュームがあったり、なかったり…
ボリュームに差があり、
ページによっては縦幅が薄いページになってしまいます。

こんなときに便利なcss「min-height」
divの最低表示をする大きさを指定できます。
最低表示なので、指定している大きさ以上のコンテンツになれば、
どんどん長くなってくれちゃいます。
最初に指定しておけば便利ですね。

ただ、min-heightはIE6に対応していないので、
対応できるようcssを書かなければいけません。

最低表示縦幅が600ピクセルとすると、
以下のように記述します。

.クラス名 {
min-height:600px;
height:auto !important;
height:600px;
}

となり、
このdivの最低表示の縦幅は600ピクセル。
1行目『min-height:600px;』
2行目『height:auto !important;』は
IE6では効きません。
有効なのは3行目の『height:600px;』のみです。
これがIE6の最低縦幅になります。
IE6はバグのため、中身のサイズに合わせて縦幅も伸びていきます。
なのでこの書き方で最低表示を指定することが可能になります。

この記事は

> > > ブロック要素の最低縦幅を簡単に指定できる「min-height」をIE6にも実装する方法

この記事と類似または関連した記事

CSS によるロールオーバー
CSS によるロールオーバー
1枚の画像に複数のリンクを貼る方法
1枚の画像に複数のリンクを貼る方法
ボックスを横並びにしたとき、最後のマージンを調整する方法
ボックスを横並びにしたとき、最後のマージンを調整する方法