CSSで親要素と同じ高さのdivを作る方法

2024-06-01

CSSで親要素の高さ100%にフロートしたdivを作る方法

このチュートリアルでは、CSSを使って親要素と同じ高さを持ち、かつ親要素内に収まるようにフロートしたdivを作る方法を説明します。この方法は、サイドバーやナビゲーションメニューなどのレイアウトによく使用されます。

方法

親要素に高さを設定する

まず、親要素に高さを設定する必要があります。これは、heightプロパティを使って行うことができます。例えば、親要素の高さを500pxに設定するには、以下のCSSコードを使用します。

.parent {
  height: 500px;
}

子要素をフロートする

.child {
  float: left;
}

子要素の高さを100%に設定する

.child {
  height: 100%;
  box-sizing: border-box;
}

ポイント

親要素に高さを設定する必要があります。
box-sizingプロパティをborder-boxに設定する必要があります。これは、子要素の高さにパディングとボーダーを含めるようにするためです。

補足

この方法は、すべてのブラウザで動作するわけではありません。Internet Explorer 8以前のバージョンの場合は、position: relativeとoverflow: hiddenプロパティを親要素に追加する必要があります。

.parent {
  height: 500px;
  position: relative;
  overflow: hidden;
}

例

以下のコードは、親要素と同じ高さを持ち、かつ親要素内に収まるようにフロートしたdivを作る例です。

<!DOCTYPE html>
<html>
<head>
  <title>Floated Div Example</title>
  <style>
    .parent {
      height: 500px;
      background-color: #ccc;
    }

    .child {
      float: left;
      width: 200px;
      background-color: #f00;
      height: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

このコードを実行すると、以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <title>Floated Div Example</title>
  <style>
    .parent {
      height: 500px;
      background-color: #ccc;
    }

    .child {
      float: left;
      width: 200px;
      background-color: #f00;
      height: 100%;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

説明

このコードは以下の通り構成されています。

<!DOCTYPE html>: HTMLドキュメントであることを宣言します。
<html>: HTMLドキュメントのルート要素です。
<head>: メタデータを含む要素です。
<title>Floated Div Example</title>: ドキュメントのタイトルを定義します。
<style>: CSSスタイルを定義する要素です。
.parent: 親要素のスタイルを定義します。
- height: 500px;: 親要素の高さを500pxに設定します。
- background-color: #ccc;: 親要素の背景色をグレーに設定します。
.child: 子要素のスタイルを定義します。
- float: left;: 子要素を左にフロートします。
</head>: <head>要素の終了タグです。
<body>: ドキュメントのコンテンツを含む要素です。
<div class="parent">: 親要素を作成します。
- <div class="child"></div>: 子要素を作成します。

CSSで親要素と同じ高さのdivを作る方法はいくつかあります。以下に、3つの一般的な方法を紹介します。

方法1： height: 100%; を使用する

この方法は、最も簡単でよく使われる方法です。親要素に高さを設定し、子要素に height: 100%; を設定します。

.parent {
  height: 500px;
}

.child {
  height: 100%;
}

方法2： display: table-cell; を使用する

この方法は、親要素と子要素を display: table-cell; に設定することで行います。

.parent {
  display: table;
}

.child {
  display: table-cell;
  height: 100%;
}

方法3： flexbox を使用する

この方法は、親要素に display: flex; を設定し、子要素に flex-grow: 1; を設定することで行います。

.parent {
  display: flex;
}

.child {
  flex-grow: 1;
}

各方法の比較

方法	説明	メリット	デメリット	対応ブラウザ
`height: 100%;`	最も簡単でよく使われる方法	簡単	親要素の高さが固定である必要がある	すべてのブラウザに対応
`display: table-cell;`	親要素と子要素をテーブルセルとして扱う	親要素の高さが固定である必要がない	`display: table;` を親要素に設定する必要がある	すべてのブラウザに対応
`flexbox`	柔軟なレイアウトが可能	親要素の高さが固定である必要がない	比較的新しいため、古いブラウザではサポートされていない可能性がある	最新のブラウザに対応