【JavaScript】要素の高さを揃える方法｜最大高さ取得・行ごとのグループ揃え・ResizeObserver・レスポンシブ対応まで解説

.card-container {
  display: flex;
  align-items: stretch; /* デフォルト値。子要素の高さが自動で揃う */
  gap: 16px;
}

.card {
  flex: 1; /* 幅も均等に */
}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* align-items のデフォルトが stretch のため高さは自動で揃う */
}

/**
 * 指定したセレクターの要素群の高さを最大値に揃える
 * @param {string|NodeList|Element[]} selector
 */
function setEqualHeight(selector) {
  const elements = typeof selector === 'string'
    ? Array.from(document.querySelectorAll(selector))
    : Array.from(selector);

  if (elements.length === 0) return;

  // 一度 height をリセットしてから計測（前回の値が残っていると正確に計れない）
  elements.forEach(el => { el.style.height = ''; });

  // offsetHeight ではなく getBoundingClientRect を使うと小数点精度で取れる
  const maxHeight = Math.max(...elements.map(el => el.getBoundingClientRect().height));

  elements.forEach(el => { el.style.height = `${maxHeight}px`; });
}

// 使用例
document.addEventListener('DOMContentLoaded', () => {
  setEqualHeight('.card');
});

/**
 * 折り返しのあるグリッドで、同じ行の要素のみ高さを揃える
 * @param {string} selector
 */
function setEqualHeightByRow(selector) {
  const elements = Array.from(document.querySelectorAll(selector));
  if (elements.length === 0) return;

  // height リセット
  elements.forEach(el => { el.style.height = ''; });

  // top 座標が同じ要素を「同じ行」としてグループ化
  const rows = new Map();
  elements.forEach(el => {
    const top = Math.round(el.getBoundingClientRect().top);
    if (!rows.has(top)) rows.set(top, []);
    rows.get(top).push(el);
  });

  // 行ごとに最大高さを設定
  rows.forEach(rowElements => {
    const maxH = Math.max(...rowElements.map(el => el.getBoundingClientRect().height));
    rowElements.forEach(el => { el.style.height = `${maxH}px`; });
  });
}

document.addEventListener('DOMContentLoaded', () => {
  setEqualHeightByRow('.card');
});

/**
 * 高さ揃えを ResizeObserver で自動再計算するクラス
 */
class EqualHeightWatcher {
  #selector;
  #observer;
  #resizeTimer = null;

  constructor(selector) {
    this.#selector = selector;

    // コンテナ要素のサイズ変化を監視
    this.#observer = new ResizeObserver(() => {
      // 連続して発火するのでデバウンス
      clearTimeout(this.#resizeTimer);
      this.#resizeTimer = setTimeout(() => this.#update(), 100);
    });
  }

  /** 監視を開始する */
  observe(container = document.body) {
    this.#update(); // 初回実行
    this.#observer.observe(container);
    return this;
  }

  /** 監視を停止する */
  disconnect() {
    this.#observer.disconnect();
    clearTimeout(this.#resizeTimer);
    return this;
  }

  /** 高さをリセットして再計算 */
  refresh() {
    this.#update();
    return this;
  }

  #update() {
    setEqualHeightByRow(this.#selector);
  }
}

// 使用例
const watcher = new EqualHeightWatcher('.card').observe(document.querySelector('.card-container'));

// 不要になったら監視解除
// watcher.disconnect();

// タブ切替時に高さを再計算する例
const tabs = document.querySelectorAll('[data-tab]');
const panels = document.querySelectorAll('[data-panel]');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;

    // パネルの切替
    panels.forEach(p => p.hidden = true);
    const activePanel = document.querySelector(`[data-panel="${target}"]`);
    activePanel.hidden = false;

    // パネルが表示されてから高さを揃える
    // hidden → visible の反映には1フレーム待つのが確実
    requestAnimationFrame(() => {
      setEqualHeightByRow(`[data-panel="${target}"] .card`);
    });
  });
});

/**
 * display:none の要素を一時的に可視にして高さを取得するユーティリティ
 */
function getHeightWhileHidden(element) {
  // 視覚的に隠しつつレイアウトを有効にする
  const prev = {
    visibility: element.style.visibility,
    display:    element.style.display,
    position:   element.style.position,
  };

  element.style.visibility = 'hidden';
  element.style.display    = 'block';
  element.style.position   = 'absolute';

  const height = element.getBoundingClientRect().height;

  // 元に戻す
  element.style.visibility = prev.visibility;
  element.style.display    = prev.display;
  element.style.position   = prev.position;

  return height;
}

/**
 * 指定したプロパティを最大値に揃える汎用関数
 * @param {string} selector
 * @param {'height'|'minHeight'|'width'} property
 */
function setEqualProperty(selector, property = 'height') {
  const elements = Array.from(document.querySelectorAll(selector));
  if (elements.length === 0) return;

  // リセット
  elements.forEach(el => { el.style[property] = ''; });

  // 寸法プロパティのマッピング
  const dimensionMap = {
    height:    'height',
    minHeight: 'height',
    width:     'width',
    minWidth:  'width',
  };
  const dimension = dimensionMap[property] ?? 'height';

  const maxVal = Math.max(
    ...elements.map(el => el.getBoundingClientRect()[dimension])
  );

  elements.forEach(el => { el.style[property] = `${maxVal}px`; });
}

// 高さを揃える
setEqualProperty('.card', 'height');

// 幅を揃える
setEqualProperty('.nav-item', 'width');

// minHeight で揃える（コンテンツが多い場合は自然に伸びる）
setEqualProperty('.card', 'minHeight');

<div class="card-container">
  <div class="card">
    <div class="card-image"><img src="image1.jpg" alt="商品1"></div>
    <div class="card-body">
      <h3 class="card-title">商品名A</h3>
      <p class="card-desc">短い説明</p>
    </div>
    <div class="card-footer"><button>詳細を見る</button></div>
  </div>
  <div class="card">
    <div class="card-image"><img src="image2.jpg" alt="商品2"></div>
    <div class="card-body">
      <h3 class="card-title">商品名B（長いタイトル）</h3>
      <p class="card-desc">こちらは説明文が長くなっています。複数行にまたがる場合でも高さを揃えたいケースです。</p>
    </div>
    <div class="card-footer"><button>詳細を見る</button></div>
  </div>
</div>

document.addEventListener('DOMContentLoaded', () => {
  // カード全体を揃えるのではなく、パーツごとに揃える（より正確なレイアウト）
  setEqualHeightByRow('.card-title');   // タイトルの高さを揃える
  setEqualHeightByRow('.card-desc');    // 説明文の高さを揃える
  setEqualHeightByRow('.card-body');    // ボディ全体を揃える

  // ウィンドウリサイズ時に再計算
  const watcher = new EqualHeightWatcher('.card-title, .card-desc, .card-body')
    .observe(document.querySelector('.card-container'));
});