HOME > Tips > CSS > CSSでボックスの高さを揃える

CSSでボックスの高さを揃える

  • Author:920

ボックス要素を横に並べるとき、それぞれのボックスのコンテンツの量が違っても高さを揃えたいときがあります。

それぞれのボックスを内包するボックスに背景イメージを使う方法が一般的ですが横幅が固定されていないと利用できません。

「border-bottom」や背景イメージを「bottom」を基準にした場合に問題はありますが、CSSだけで高さを揃える方法を試してみました。

方法は、高さを揃えたいボックスに十分に大きな正の値の「padding-bottom」と負の値の「margin-bottom」を同じ値だけ設定し、次に、高さを揃えたいボックスを内包するボックスに、「overflow: hidden」を設定します。これでコンテンツの量に関係なくボックスの高さが同じになります。(性格には、「同じように見える」が正しいでしょう)

サンプル

UP