高さが低い要素に高さを揃える

2017.07.11 公開 / 2026.01.29 更新

2026-01-29 追記: contain: sizeを使用したより簡単な実装方法を追加しました。

通常、ウェブのレイアウトにおいて高さ揃えというと水平方向に並んだ要素のうち一番高い要素にあわせて他の要素の高さを揃えることがほとんどかと思いますが、今回は高さが低い要素に合わせて高さを揃える実装が必要になりました。

2017年にもなって高さ揃えの話かとは思いつつ、検索してもこれと言った方法が見つからなかったため実際に実装した方法を紹介します。

要件

具体的には、左カラムに高さが可変のニュースエリアがあり右カラムにバナー画像が並ぶレイアウトで、バナーの数は2 〜 4個。こちらも高さが可変します。全体の高さはバナーがある右カラムに依存し、左のニュースカラムが右カラムより高くなる場合は高さを右カラムに合わせて、はみ出したコンテンツを閲覧するためにスクロールバーを出す、という要件です。

要件のデザインデータ画像

なお、仮に左カラムのコンテンツが少なく右カラムの方が高くなった場合は、右カラムの高さを低くして合わせるのではなく単に高さを揃えるのみとします。

実装

HTMLの構成は、カラムをラップする.wrapperと、高さが可変する.mainカラム、.mainカラムの高さに追随する.subカラムを用意し、.subカラムにはインナー要素（.sub-inner）を追加し、それぞれの中にコンテンツを配置します。

<div class="wrapper">
  <div class="sub">
    <div class="sub-inner">
      content ...
    </div>
  </div>
  <div class="main">
    content ...
  </div>
</div>

CSSは、.wrapperをフレックスコンテナーとし、.mainと.subの高さを揃えます。ただし、このままでは、.subの高さが.mainより高くなった場合、.subに高さが揃ってしまいます。

そこで.subカラムの高さを自身の子要素の高さに依存させないために、.sub-innerにheight:0を指定します。これにより.subは高さを持つ子要素が無いため、高さは.mainの高さに依存することになります。

最後にはみ出た内容を要素上のスクロールで見せるためにoverflow-y:scrollを与えると、要件を満たしたレイアウトが実装できます。

.mainの高さがあまりに少なく文章が読みにくくなってしまうケース（運用上は想定外だがバナーが1個になってしまったケースなど）に備えて.subにmin-heightを指定するか、.sub-innerにある程度の高さを与えても良いでしょう。

.wrapper {
  display: flex;
}
.sub {
  overflow-y: scroll;
  min-height: 5em;
}
.sub-inner {
  height: 0;
}

デモ

See the Pen Height adjust low colum by masuP9 (@masuP9) on CodePen.

本実装の問題点

本実装には、次の問題点があります。

高さを合わせる要素を事前にマークアップで指定する必要がある
.subのpadding-bottomが無視される

前者の「高さを合わせる要素を事前に指定する必要がある」は、対象の要素群に対して、.mainと.subというクラスを事前に割り振る必要があるため、要素を高さを合わせる要素を指定しておかなければならず一番低くなる要素が不確定の場合に対応できない、という問題です。

今回は「右のバナーカラムの高さが左のカラムより低くなった場合、左のカラムの高さは合わせなくてよい」という要件だったため問題ありませんが、一番低くなる要素が不確定の場合は世に普及している、JavaScriptで要素の高さを比較して高さを揃えるライブラリのロジックを修正することでおそらく実現できるはずです。

後者の「.subのpadding-bottomが無視される」は、overflow:scrollを使用しているためですが、デザインによっては、余白は.wrapperに持たせたり.sub-inner直下の最後の要素に余白を追加したりすることで解決できます。

まとめ

本実装の要点をまとめると、「高さを合わせる要素にインナー要素を設置し、インナー要素の高さを0 or 計算外にし各要素の高さを揃える。そのため事前に高さを合わせる要素を指定する必要がある。」となるでしょうか。

フレックスボックスが使用できるようになり高さ揃えに悩むことは少なくなりましたが、高さが低い方に合わせるという要件の場合は、まだ少し悩まされるかもしれません。

2026-01-29 追記

お久しぶりです。2026年にもなってやっぱり高さを揃える話をしています。CSSの進化によってレイアウト用の要素.sub-innerを設置せずとも高さの計算を0とし、フレックスやグリッドレイアウトによって高さを他の要素に合わせることができるようになりました。

.wrapper {
  display: block grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sub {
  contain: size;
  overflow-y: scroll;
}

ポイントはcontain: sizeです。これにより、要素のサイズが要素の子要素に依存しなくなります。明示的にサイズを指定しない限り、子要素のサイズがどうあっても height: 0, width: 0 と計算されるようになります。

あとはグリッドレイアウトで要素の高さを他の要素に揃えることで、自身より低い要素に合わせることができます。

contain: sizeは高さだけではなく幅の計算もしないため、幅は明示的に与える必要があります。追記中のコード例で言えば、親要素のgrid-template-columnsによって幅が指定されているため、幅は0になりません。

Special Thanks: @tak_dcxi、 @No_1026

ではまた次の高さ揃えで会いましょう。アディオス。