【JavaScript】並列要素の高さを揃える方法

JavaScriptを利用して「並列する要素の高さを均一にする」という対応を行ったので公開します。

CSSでも対応できるのですが、今回は事情がありJavaScriptで適用させる形にしています。

JavaScriptで書いたコード

完成品

See the Pen 【JavaScript】並列要素の高さを揃える Math.max() by nkmrkisk (@rekid) on CodePen.

書いたコード

 title="書いたコード"]
// DOMの読み込みが完了したら発火
window.addEventListener("DOMContentLoaded",function(){
  // 全ての「.js-height-max」を「elem」に代入
  // ここのClassNameを変更すれば、ある程度汎用性もあるかと思います。
  var elem = document.getElementsByClassName("js-height-max");

  // 「h_list」にElementsの高さの配列を代入
  var h_list = getHeight(elem);

  // 「h_list」の中で最も大きい値を算出し代入
  h_list = Math.max.apply(null, h_list);

  setHeight(elem,h_list);
  
},false);

// 最も大きい値を各Elementsに付与
function setHeight(target,h){
  for(var h_i = 0;h_i<target.length;h_i++){
    target[h_i].style.height = h+"px";
  }
}

// 「target」で、DOMElementsを渡すと、そのElementsの高さを配列で返す。
function getHeight(target){
  var h = [];
  for(var h_n = 0;h_n<target.length;h_n++){
    h[h_n] = target[h_n].clientHeight;
  }
  return h;
}

CSSだけで完結できるケースもあります。

今回の対応、CSSだけで完結できるケースもあります。
手法としては、「display:table-cell」「display:flex」などを利用する方法です。

参考にさせてもらった記事のリンクをいくつか紹介します。
CSSのみで横並びの要素の高さを揃える

「display:table-cell」はCodeGridの
「第1回 display: tableの活用 1」が参考になります。

「display:flex」での対応方法についてはLIGさんの
「CSS3のFlexboxを基本から理解して、使い倒そう！」が参考になります。

今回CSSを利用しなかった理由

「display:flex」に関しては、IE9が未対応なので今回は見送りました。

また前提として、案件自体がもともとBootstrapを利用していたため、デフォルトで「col-」系のclass指定がされてました。つまり、下記の状態です。

• 「float:left」がかかってる
• レスポンシブデザイン

「display:table-cell」は、「float:left」だと反応しないみたいです。
あと要素間の余白の設定も「tableライク」なので、あまり触ったことの無い方の場合は少し難儀します。（僕がもろこれです。）

また、bootstrapのレスポンシブデザインを崩したくなかったので、「col-」系の指定はそのままにしたいと考えてました、でもそうすると、CSSでわざわざブレークポイントを設けて、一定width以上の場合はデフォの「floatの打ち消し」と、「display:table-cell」なしのレイアウトをスマホ用に記述する必要が出てくるので今回はこちらも見送る決断をしました。

一応、CSSでの対応もやってみました

See the Pen 【CSS】並列要素の高さを揃える by nkmrkisk (@rekid) on CodePen.