Flexboxやgridを使ったレイアウトが増えてきているので、必要となる場面は減ってきているのですが、floatで横並びにした時や、position: absolite;などの絶対配置を使った時に、要素の高さを揃えたい場合があるかと思います。そんな時にjavascriptを使って動的に要素の高さを揃える方法になります。   今回はサンプルに下記のようなHTMLを用意しました。複数の要素が横並びになるようなケースであれば大抵使えるのではないでしょうか。 【HTML / CSS】※一部抜粋

// HTML

<div>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキスト
 </p>
 <p class="equal-height">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 </p>
</div>

// CSS

<style>
 div {
  overflow: hidden;
 }
 div > p {
  float: left;
 }
</style>

  高さを揃えたい要素にはclassをあてています。これでjavascriptを使ってclassを割り振った要素の高さを揃えていきます。コードは次のようになります。 【javascript（ES6）】

function equalHeight(elements) {
 const target = Array.from(document.querySelectorAll(elements));
 const heightList = [];
 target.forEach(element => {
  const height = element.clientHeight;
  heightList.push(height);
 });
 const maxHeight = Math.max.apply(null,heightList);
 target.forEach(element => {
  element.style.height = maxHeight + 'px';
 });
}

equalHeight('.equal-height');

  まず指定要素をquerySelectorAllで全て取得し、NodeListから配列に変換しておきます。あわせて各要素の初期値の高さを保持するための空の配列を用意しておきます。先ほど取得したそれぞれの要素から高さを取得します。取得した高さの値は、用意していた空の配列に入れていきます。   そして、全ての高さの値から最大の値を取得し、再びそれぞれの要素に対して最大値の値を高さに設定するという仕組みになります。ちなみに上記のArray.from()のメソッドはIE11に対応していないので注意が必要です。IE11への対応を考慮する場合には代わりに、Array.slice.call()を使うようにします。そして、最後に定義した関数を実行する際に、引数として対象の要素のclassを与えてあげます。   今回のサンプルはこちらに用意しています。関数として定義しているので、引数を取っておくと、要素が変わった時に使いまわせるので便利ですね。もちろん複数箇所で適用させることも可能です。

See the Pen equal height by designsupply (@designsupply) on CodePen.

要素を揃える場合にはjQueryなどでもいろんなプラグインが用意されていますが、限定的である場合などプラグインを使うまでもない場合にはこのような形で調整するのもいいのではないでしょうか。