HTML、CSS、heightを使ったdivの高さをコンテンツに合わせて拡張する方法

この解説では、HTML、CSS、height を使って、div の高さをコンテンツに合わせて自動的に拡張する方法について説明します。

方法

主に以下の3つの方法があります。

height: auto を使用する

これは最も簡単な方法です。div の高さに height: auto を指定すると、コンテンツに合わせて自動的に高さが調整されます。

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  height: auto;
}

flexbox は、要素を柔軟にレイアウトするための CSS レイアウトシステムです。div に display: flex を指定し、flex-direction: column を指定すると、子要素が縦方向に並べられ、div の高さがコンテンツに合わせて自動的に調整されます。

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  display: flex;
  flex-direction: column;
}

CSS Grid は、要素をグリッドレイアウトで配置するための CSS レイアウトシステムです。div に display: grid を指定すると、子要素をグリッド状に配置できます。height: auto を指定すると、div の高さがコンテンツに合わせて自動的に調整されます。

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  display: grid;
  height: auto;
}

各方法の比較

注意点

• 子要素に絶対配置を使用している場合、div の高さが正しく調整されない場合があります。
• コンテンツ内に画像など、高さが可変の要素がある場合、div の高さがコンテンツに合わせて調整されるまで時間がかかる場合があります。

上記以外にも、JavaScript を使用して div の高さをコンテンツに合わせて調整する方法もあります。

height: auto を使用

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget neque massa. Nunc euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi. Cras euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi.
  </p>
</div>

div {
  height: auto;
}

flexbox を使用

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget neque massa. Nunc euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi. Cras euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi.
  </p>
</div>

div {
  display: flex;
  flex-direction: column;
}

CSS Grid を使用

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget neque massa. Nunc euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi. Cras euismod, nisl eget ultricies convallis, eros metus hendrerit massa, eget porta tellus massa sed neque. Praesent et lectus sed augue laoreet ultricies. Donec sit amet risus eu sapien rutrum ultricies. Fusce ac dui urna. Donec sed neque velit. Nulla facilisi.
  </p>
</div>

div {
  display: grid;
  height: auto;
}

min-height プロパティを使用して、div の最小の高さを指定できます。コンテンツの高さが最小高さを超えると、div の高さがコンテンツに合わせて拡張されます。

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  min-height: 200px;
}

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  max-height: 400px;
}

vh を使用する

vh は、ビューポートの高さの割合を表す単位です。height: 100vh を指定すると、div の高さがビューポートの高さに設定されます。

<div>
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

div {
  height: 100vh;
}

<div id="my-div">
  <h1>タイトル</h1>
  <p>これはコンテンツです。ここにテキストや画像などを配置できます。</p>
</div>

const div = document.getElementById("my-div");
const contentHeight = div.scrollHeight;
div.style.height = contentHeight + "px";

• これらの方法は、ブラウザのサポート状況によって異なる場合があります。