ハコにキャパ制約を設けてクリムゾンやパープルを入れる
あ、音楽の話じゃありません。
IE6対策（min-height編）
です。
例えばサイトのコンテンツが少ない場合、フッター部分をある高さ以上に行かせないために「中身に応じて縦方向に可変、ただし最小値を持つボックス」を作る必要があります。
普通は「min-height」を使えばおしまいですが、IE6も考慮に入れるとハックをしなければなりません。
関連して、IE6に実装されていない
- min-height
- max-height
- min-width
- max-width
min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript[to-R]
にあるように、jsを利用すれば簡単ですが、２つ前の投稿で書き忘れたので、「IE6のバグを利用してCSSだけでmin-heightを実現させる方法」についてまとめてみました。
その手法は、IE6のバグを利用してIE6にも対応させるというものですが、まるで相手の力を利用して背負い投げ決まったかのようで, 美しくもあると思います。
ここではIE6のバグを２つ利用していて、１つ目は
overflow: visible; が指定されているとき（初期値）、ボックスをはみ出す内容物はボックス外に表示されると規定されているが、IEでは内容物に合わせてボックスが拡大される。というもの。つまり、IE6では、高さ（height）を150pxにしても、その中に高さ200pxの物が入ったら外も200pxに伸びてしまう（150pxよりも小さい場合は不変）ということなんですが、、、つまり、「height」で指定しても「min-height」と同じ結果になっちゃってるんですよね（図１）。
（Step 1）
CSS↓
.h150 {
background:#00f;
width:300px;
height:150px;
}
.dp {
background:#707;
color:#fff;
width:200px;
height:100px;
}
.kc {
background:#802;
color:#fff;
width:100px;
height:200px;
}
html↓
<p>ショッキング・ブルーの箱＝高さ150px</p> <div class="h150"> <p class="dp">深紫色<br>高さ100px<br>幅200px</p> </div> <p> </p> <div class="h150"> <p class="kc">深紅色<br>高さ200px<br>幅100px</p> </div>
結果
↓
ショッキング・ブルーの箱＝高さ150px
深紫色
高さ100px
幅200px
深紅色
高さ200px
幅100px
（図１）IE6の（正しくない）見え方↓
（図２）IE6以外の（正しい）見え方↓
続いて、IE6以外でも「箱より大きなものが入ったら箱を拡大」させるために、「height:auto;」を使うんですが、「IE以外」でそうさせるためには、次の２つ目のバグを利用します。
WinIEでは「後に指定したものを優先する」という方を強く解釈してしまう（!importantを無視してしまう）さっきの「height:150px;」の前に「height:auto !important;」を入れて、
（Step 2）
CSS↓
.h_auto {
background:#00f;
width:300px;
height:auto !important; /* ← 追加*/
height:150px;
}
.dp {
background:#707;
color:#fff;
width:200px;
height:100px;
}
.kc {
background:#802;
color:#fff;
width:100px;
height:200px;
}
html↓
<p>ショッキング・ブルーの箱＝IE6以外は高さ自動</p> <div class="h_auto"> <p class="dp">深紫色<br>高さ100px<br>幅200px</p> </div> <p> </p> <div class="h_auto"> <p class="kc">深紅色<br>高さ200px<br>幅100px</p> </div>
とすると、結果はこうなります↓
ショッキング・ブルーの箱＝IE6以外は高さ自動
深紫色
高さ100px
幅200px
深紅色
高さ200px
幅100px
（図３）IE6の見え方は変化なし↓
（図４）IE6以外で箱の高さが変化した↓
ただしこれだけだと、IE6以外で、箱より大きいものが中に入った場合はそれに応じて伸びてくれますが、箱より小さいものの場合は縮んでしまいます。
そこで、高さに最小値を持たせるために、いよいよIE6では認識されない「min-height」の登場です。
（Step 3）
CSS↓
.min_h150 {
background:#00f;
width:300px;
min-height:150px; /* ← 追加*/
height:auto !important;
height:150px;
}
.dp {
background:#707;
color:#fff;
width:200px;
height:100px;
}
.kc {
background:#802;
color:#fff;
width:100px;
height:200px;
}
html↓
<p>ショッキング・ブルーの箱＝高さの最小値が150pxの箱</p> <div class="min_h150"> <p class="dp">深紫色<br>高さ100px<br>幅200px</p> </div> <p> </p> <div class="min_h150"> <p class="kc">深紅色<br>高さ200px<br>幅100px</p> </div>
結果
↓
ショッキング・ブルーの箱＝高さの最小値150px
深紫色
高さ100px
幅200px
深紅色
高さ200px
幅100px
（図５）IE6の見え方↓
（図６）IE6以外の見え方↓
ということで、IE6とそれ以外で「min-height:150px;」としたのと同じ表示になりました。
【結論】
{
min-height:●●;
height:auto !important;
height:●●;
}
（●●は同じ高さ）としてやれば、IE6でも「min-height:●●;」と同じ結果が得られる。
んですが、素朴な疑問として、「height:auto !mportant;」よりも「min-height:●●;」が優先されているような、、、。これは「height」と「min-height」は別物として解釈されている、ということでしょうか。
とにかく、最初に書いたとおり、jsを使えば簡単だと思います。
まあ、考え方が応用が効くということで。
【追記】
- 画像のキャプチャを撮った後、文言を変えましたが色の高さは変わっていません。
- 最初上記のようにやっても上手く出来ませんでした。原因を追求したら、同じclassに「overflow:hidden;」がかかっていたからで、理由はoverflow:hiddenでfloatをclearさせるためでした。外側を<div>で囲って、そこにスタイルシートを適用させたらうまくいきました。
Deep Purple – Burn
King Crimson – The Court of the Crimson King
SHOCKING BLUE – Venus
