floatした要素の高さを揃える(ように見せかける)
borderを指定していなければCSSのみで見せかけられる
下図のような事例を想定します。
ここで、赤枠で囲まれた部分の高さを揃えたいという要望があったと仮定しましょう。
グレーのエリアは、両方ともfloatが指定されています。
高さを揃える方法はjsを用いる方法などありますが、今回のような要望はCSSのみで対応可能だったので、方法をご紹介します。
まず、サンプルのHTMLは以下のような構造をしています。
今回は背景色だけを敷けばよいので、高さを揃えるように見せかけるため、floatした要素にpadding-bottomを設定します。
.float-item{ padding-bottom: 32767px; margin-bottom: -32767px; }
こうすることで、次のような状態になります。
paddingと同じ数だけマイナスマージンをかけることで、余計な空白が生まれないよう調整しています。
数値は32767pxにこだわる必要はなく、高さを揃えるに十分なだけ指定すればよいです。
このとき親要素の高さは、コンテンツ量の多い左の.float-itemと同じ高さを維持しています。
ここまで書けば、カンの鋭い方はお気づきかと思いますが、親要素にoverflow:hiddenをかければ高さが揃ったように見せることができます。
.float-container{ min-height: 100%; overflow: hidden; }
min-heightはクロスブラウザ対策をする上での、おまじないのようなものです(IE, firefoxはこの指定がないと意図通りの表示になりません)。
IE6より対応可能です。
MQする際は、先ほど指定したスタイルをすべて切れば対応可能です。
もちろんのこと、膨大な数のpadding-bottomをかけているので下ボーダーを指定した場合は表示されません。
borderを指定していたら、素直にjsを使ったほうが無難です。
背景色のみ指定している場合に対応可能な手法です。