HTML、CSS、および HTML テーブルを使用して画面の残りのスペースの高さを埋める div を作成する方法

2024-04-05

HTML、CSS、および HTML テーブルを使用して画面の残りのスペースの高さを埋める div を作成する方法

前提条件

このチュートリアルを完了するには、次のものが必要です。

HTML と CSS の基本的な知識
テキストエディタ
Web ブラウザ

手順

HTML ファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画面の残りのスペースの高さを埋める div</title>
</head>
<body>
  <div id="container">
    <h1>画面の残りのスペースを埋める div</h1>
    <p>この div は、画面の残りのスペースの高さを埋めます。</p>
  </div>
</body>
</html>

次の CSS コードをスタイルシートファイルに追加します。

#container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Web ブラウザで HTML ファイルを開きます。画面の残りのスペースを埋める div が表示されます。

説明

このコードは、次の方法で動作します。

#container div は、height: 100vh プロパティを使用して、ビューポートの 100% の高さに設定されます。
display: flex プロパティは、#container div を flexbox レイアウトに設定します。
flex-direction: column プロパティは、flex アイテムを垂直方向に配置します。
justify-content: center プロパティは、flex アイテムを垂直方向に中央揃えします。

画面の残りのスペースの高さを埋める div を作成するには、他にもいくつかの方法があります。

CSS Grid レイアウトを使用する

CSS Grid レイアウトは、画面をグリッドに分割して、要素を配置するための新しいレイアウトシステムです。

JavaScriptを使用する

JavaScript を使用して、div の高さを動的に設定できます。

このチュートリアルでは、HTML、CSS、および HTML テーブルを使用して、画面の残りのスペースの高さを埋める div を作成する方法を説明しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画面の残りのスペースの高さを埋める div</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <h1>画面の残りのスペースを埋める div</h1>
    <p>この div は、画面の残りのスペースの高さを埋めます。</p>
  </div>
</body>
</html>

#container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

CSS Grid レイアウトを使用する

<div id="container">
  <div class="header">
    <h1>画面の残りのスペースを埋める div</h1>
  </div>
  <div class="content">
    <p>この div は、画面の残りのスペースの高さを埋めます。</p>
  </div>
</div>

#container {
  display: grid;
  grid-template-rows: auto 1fr;
}

.header {
  grid-area: 1 / 1 / 1 / -1;
}

.content {
  grid-area: 2 / 1 / -1 / -1;
}

このコードでは、#container div を CSS Grid レイアウトで配置しています。

grid-template-rows: auto 1fr プロパティは、グリッドの行を 2 つに分割します。最初の行は自動的にサイズが調整され、2 番目の行は残りのスペースをすべて占めます。
.header div は、最初の行に配置されます。

JavaScriptを使用する

<div id="container"></div>

<script>
const container = document.getElementById('container');

const resizeHandler = () => {
  container.style.height = `${window.innerHeight}px`;
};

window.addEventListener('resize', resizeHandler);

resizeHandler();
</script>

このコードでは、JavaScript を使用して、#container div の高さを動的に設定しています。

resizeHandler 関数は、window.innerHeight プロパティを使用して、ブラウザのウィンドウの高さを取得します。
container.style.height プロパティを使用して、#container div の高さを設定します。
window.addEventListener イベントリスナーを使用して、resize イベントを監視します。
resizeHandler 関数は、ウィンドウのサイズが変更されるたびに呼び出されます。

このチュートリアルでは、画面の残りのスペースの高さを埋める div を作成する方法をいくつか紹介しました。どの方法を使用するかは、プロジェクトの要件によって異なります。

画面の残りのスペースの高さを埋める div を作成するその他の方法

CSS vh 単位を使用する

<div id="container">
  <h1>画面の残りのスペースを埋める div</h1>
  <p>この div は、画面の残りのスペースの高さを埋めます。</p>
</div>

#container {
  height: 100vh;
}

注意点:

vh 単位は、古いブラウザではサポートされていない場合があります。

CSS calc() 関数を使用する

calc() 関数を使用して、div の高さを動的に計算することができます。例えば、次のコードは、画面の高さからヘッダーの高さを引いて、div の高さを設定します。

<div id="container">
  <header>
    <h1>画面の残りのスペースを埋める div</h1>
  </header>
  <p>この div は、画面の残りのスペースの高さを埋めます。</p>
</div>

#container {
  height: calc(100vh - 50px);
}

JavaScriptを使用して、div の高さを動的に設定することができます。例えば、次のコードは、window.innerHeight プロパティを使用して、ブラウザのウィンドウの高さを取得し、div の高さを設定します。

<div id="container"></div>

<script>
const container = document.getElementById('container');

const resizeHandler = () => {
  container.style.height = `${window.innerHeight}px`;
};

window.addEventListener('resize', resizeHandler);

resizeHandler();
</script>