HTMLとCSSで並んだ2つのdiv要素の高さを同じにする4つの方法：flexbox、height: 100%、position: absolute、js

2024-04-02

HTMLとCSSで並んだ2つのdiv要素の高さを同じにする方法

方法

display: flex;を使う
- 親要素にdisplay: flex;を指定することで、子要素をFlexboxレイアウトで配置できます。
- align-items: stretch;を指定することで、子要素の高さを親要素の高さに合わせます。
- シンプルで汎用性の高い方法です。
- 古いブラウザでは対応していない場合があります。

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

.container {
  display: flex;
}

.left,
.right {
  flex: 1;
  align-items: stretch;
}

height: 100%;を使う
- 子要素にheight: 100%;を指定することで、親要素の高さを100%に設定できます。
- 親要素の高さが固定されていないと、子要素の高さが正しく設定されない場合があります。

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

.container {
  height: 500px; /* 親要素の高さを固定する */
}

.left,
.right {
  height: 100%;
}

position: absolute;を使う
- 子要素にposition: absolute;とtop: 0;、bottom: 0;を指定することで、親要素の高さに合わせることができます。
- 他の方法と比べて柔軟なレイアウトが可能です。
- コードが複雑になり、positionプロパティの理解が必要となります。

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

.container {
  position: relative;
}

.left,
.right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

jsを使う
- JavaScriptを使って、子要素の高さを動的に調整する方法です。
- 複雑なレイアウトや、動的に変化するコンテンツに対応できます。
- JavaScriptの知識が必要となります。

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const setHeight = () => {
  const height = Math.max(left.offsetHeight, right.offsetHeight);
  left.style.height = height + 'px';
  right.style.height = height + 'px';
};

window.addEventListener('load', setHeight);
window.addEventListener('resize', setHeight);

HTML

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

CSS

.container {
  display: flex; /* Flexboxレイアウトを使用 */
}

.left,
.right {
  flex: 1; /* 子要素を同等に伸縮 */
  align-items: stretch; /* 子要素の高さを親要素に合わせる */
}

説明

flex: 1; を使って、子要素を同等に伸縮させます。

上記以外にも、2つのdiv要素の高さを同じにする方法はいくつかあります。

height: 100%;を使う

.left,
.right {
  height: 100%;
}

position: absolute;を使う

.left,
.right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

jsを使う

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const setHeight = () => {
  const height = Math.max(left.offsetHeight, right.offsetHeight);
  left.style.height = height + 'px';
  right.style.height = height + 'px';
};

window.addEventListener('load', setHeight);
window.addEventListener('resize', setHeight);

2つのdiv要素の高さを同じにするその他の方法

CSS Gridは、2次元レイアウトを簡単に作成できるレイアウトシステムです。

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

このコードは、2つのdiv要素を横並びに並べ、同じ高さにします。

table要素は、表を作成するために使用されますが、レイアウトにも使用できます。

<div class="container">
  <table>
    <tr>
      <td>
        <div class="left">
          コンテンツ
        </div>
      </td>
      <td>
        <div class="right">
          コンテンツ
        </div>
      </td>
    </tr>
  </table>
</div>

.container {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  width: 50%;
  vertical-align: top;
}

<div class="container">
  <div class="left">
    コンテンツ
  </div>
  <div class="right">
    コンテンツ
  </div>
</div>

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const setHeight = () => {
  const height = Math.max(left.offsetHeight, right.offsetHeight);
  left.style.height = height + 'px';
  right.style.height = height + 'px';
};

window.addEventListener('load', setHeight);
window.addEventListener('resize', setHeight);