2015/09/09

float で並べた2つの要素の高さを揃える方法

2カラムレイアウトや3カラムレイアウトでdivでfloatするレイアウトを作成することが多いですよね。
また、レスポンシブルレイアウトに対応させるために、CSSで各要素を横並びしたりすることがよくあります。
そんな時に、背景色等の問題で高さを揃えたい時に使えるテクニックです。

親コンテンツに対してのCSS

親コンテンツには、

  • min-height: 100%;
  • overflow: hidden;
を指定しておく。

子コンテンツに対してのCSS

子コンテンツには、
  • padding-bottom: 32767px;
  • margin-bottom: -33767px;
  • height: 100%;
を指定しておく。