親要素の高さに子要素をぴったり合わせる！ flexbox、CSS Grid、position: absolute、vh、JavaScript を使った 5つの方法

子要素の div を親要素の div の高さ 100% に強制する方法

親要素の div の高さを指定せずに、子要素の div を親要素の高さ 100% にしたい場合があります。しかし、どのようにすれば良いのか分からない人もいるでしょう。

解決策

この問題を解決するには、いくつかの方法があります。

方法 1: flexbox を使う

flexbox を使用すると、子要素を親要素の高さ 100% に簡単に設定できます。

1. 親要素に display: flex を設定します。
2. 子要素に height: 100% を設定します。

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  display: flex;
}

.child {
  height: 100%;
}

方法 2: CSS Grid を使う

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  display: grid;
}

.child {
  height: 100%;
}

方法 3: position: absolute を使う

1. 親要素に position: relative を設定します。
2. 子要素に position: absolute と top: 0 と bottom: 0 を設定します。

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

方法 4: vh を使う

vh は、ブラウザのウィンドウポートの高さに対するパーセンテージを表す単位です。

<div class="child">
  コンテンツ
</div>

.child {
  height: 100vh;
}

注意点

これらの方法は、すべての状況でうまくいくわけではありません。例えば、親要素の高さ自体が動的に変化する場合は、子要素の高さも動的に変化するように設定する必要があります。

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  display: flex;
}

.child {
  height: 100%;
}

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  display: grid;
}

.child {
  height: 100%;
}

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

<div class="child">
  コンテンツ
</div>

.child {
  height: 100vh;
}

CSS calc() を使用すると、親要素の高さから子要素の margin や padding を引いた値を子要素の高さに設定できます。

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

.parent {
  height: 100vh;
}

.child {
  height: calc(100% - 20px); /* 子要素の margin や padding を考慮する */
}

方法 6: JavaScript を使う

JavaScript を使用すると、子要素の高さ を親要素の高さ に動的に設定できます。

<div class="parent">
  <div class="child">
    コンテンツ
  </div>
</div>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

child.style.height = `${parent.offsetHeight}px`;

これらの方法は、上記の方法よりも複雑ですが、より柔軟な設定が可能です。

子要素の div を親要素の高さ 100% に強制するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるので、自分の目的に合った方法を選択してください。