【JavaScript】要素の高さを揃える【リサイズ対応】

こんにちは、Ryohei（@ityryohei）です！

横並びにした要素の高さを揃えるスクリプトのご紹介です。

jQueryであれば、matchHeightというプラグインを使えば簡単に実装できる内容ですが、jQueryに頼らず、プラグインなしで要素の高さを揃えたかったため、今回スクリプトを作成しました。ロード、リサイズにも対応していますので、同様の処理を探している方の参考になれば幸いです。

本記事の内容

親要素を指定して、横並びにした子の中で一番高い要素の高さに揃える

では解説していきます。

横並びの要素の高さを揃える

HTML

本記事では、下記のHTMLを使用します。idがelemとなっている要素の子の高さを揃えます。

<ul id="elem">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

上記のHTMLに横並びになるスタイルを適用させると下記のようになります。下記ではfloatを使用して子要素を横並びにしています。高さを固定していないため、コンテンツに合わせた高さとなっています。

See the Pen JavaScript | autoHeight1 by ryoy (@intotheprogram) on CodePen.

JS

コンテンツの高さを揃えるためのスクリプトを記述します。idがelemとなっている要素の子を取得し、子の中でheightが一番高い要素に高さを揃えています。処理内容については、コメントをご参照ください。

const autoHeight = () => {

  //idがelemの要素を取得
  let elem = document.getElementById('elem');
  //elemの子要素をすべて取得
  let elemChildren = elem.children;
  //高さの最大値を代入する変数を初期化
  let elemMaxHeight = 0;
  //elemの子要素の高さを格納する配列を初期化
  let elemArray = new Array;

  //elemの子要素をループ
  Array.prototype.forEach.call(elemChildren, function(elemChild) {
    
    //子要素の高さのスタイルを初期化（リサイズ対応用）
    elemChild.style.height = '';
    //elemの各子要素の高さを取得
    elemArray.push(elemChild.clientHeight);

  });

  //配列に格納した高さの最大値を取得
  elemMaxHeight = Math.max.apply(null, elemArray);

  //elemの子要素をループ
  Array.prototype.forEach.call(elemChildren, function(elemChild) {
    //elemの子要素のheightにelemMaxHeightを設定
    elemChild.style.height = elemMaxHeight + 'px';

  });
}

//ロードとリサイズ時に関数autoHeightを実行
window.addEventListener('load', autoHeight);
window.addEventListener('resize', autoHeight);

下記はスクリプトを実行した結果です。横並びになった子要素の中で一番高い要素に高さを揃えています。リサイズにも対応していますので、「EDIT ON CODEPEN」をクリックしてウィンドウサイズを変更して試していただければと思います。

See the Pen JavaScript | autoHeight2 by ryoy (@intotheprogram) on CodePen.

上記でご紹介したスクリプトでは、idを指定して親要素を取得していますが、他の方法で親要素を取得したい場合は下記のページで各要素の取得方法を解説していますので、参考にしていただければと思います。

【JavaScript】要素にclassを追加・削除する【classList】