min-heightについて

ページの内容によって高さを任意に変えたいと思って、min-height使おうと思ったんだけど、まさかIE6以前で利かないとは。。。

相変わらずIEやっかい。。。

とりあえず実践した方法をメモ書きしておきます。

body {
height: auto;
}

#wrapper {
height: auto;
}

#hoge {
min-height:700px; /*任意の高さ*/
height:auto !important;
height:700px; /*IE６用の高さ*/
}

まずbodyと、ページ全体を括るタグ(ここではwrapper)に【height: auto;】を入れて
内容が増えたらページ全体が伸びるように指定。

次に最低限の高さを伸び縮みしてほしいところに指定。
IE6以前は!importantが利かないことを利用したハックですね。

この２点をしっかり書いておけば内容が薄いページでも見栄えのいい高さを保ちつつ
情報の多いページでもフッターなどと被っちゃったりする心配もないですね。

いままでは面倒でも全ページpxで高さ指定してたんですが、そのわずらわしさから開放されます(^^;)

っていうかもっと早く気づけばよかった。。。




【参考URL】
http://oshiete1.goo.ne.jp/qa3223137.html
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html