knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

floatした要素の高さを揃える

borderを指定していなければCSSのみで対応可能

下図のような事例を想定します。

 

f:id:ShinImae:20151211182607j:plain

ここで、赤枠で囲まれた部分の高さを揃えたいという要望があったと仮定しましょう。

グレーのエリアは、両方ともfloatが指定されています。

高さを揃える方法はjsを用いる方法などありますが、今回のような要望はCSSのみで対応可能だったので、方法をご紹介します。

まず、サンプルのHTMLは以下のような構造をしています。

 

f:id:ShinImae:20151211182614j:plain

今回は背景色だけを敷けばよいので、高さを揃えるように見せかけるため、floatした要素にpadding-bottomを設定します。

.float-item{
   padding-bottom: 32767px;
   margin-bottom: -32767px;
}

こうすることで、次のような状態になります。

 

f:id:ShinImae:20151211182623j:plain

paddingと同じ数だけマイナスマージンをかけることで、余計な空白が生まれないよう調整しています。

数値は32767pxにこだわる必要はなく、高さを揃えるに十分なだけ指定すればよいです。

このとき親要素の高さは、コンテンツ量の多い左の.float-itemと同じ高さを維持しています。

 

f:id:ShinImae:20151211182630j:plain

ここまで書けば、カンの鋭い方はお気づきかと思いますが、親要素にoverflow:hiddenをかければ高さが揃ったように見せることができます。

.float-container{
   min-height: 100%;
   overflow: hidden;
}

 

f:id:ShinImae:20151211182639j:plain

min-heightはクロスブラウザ対策をする上での、おまじないのようなものです(IE, firefoxはこの指定がないと意図通りの表示になりません)。

IE6より対応可能です。

MQする際は、先ほど指定したスタイルをすべて切れば対応可能です。

もちろんのこと、膨大な数のpadding-bottomをかけているので下ボーダーを指定した場合は表示されません

borderを指定していたら、素直にjsを使ったほうが無難です。

背景色のみ指定している場合に対応可能な手法です。