HTML/CSS/XHTML で 100% 最小高さ CSS レイアウトを構築！レスポンシブ Web デザインにも最適！

2024-04-04

100% 最小高さ CSS レイアウトは、HTML、CSS、および XHTML を使用して、コンテンツの高さを常に 100% に保つレイアウト手法です。これは、画面サイズやブラウザのウィンドウサイズに関わらず、コンテンツが常に画面全体を覆うように表示されるようにするのに役立ちます。

仕組み

このレイアウト手法は、主に以下の CSS プロパティを使用して実現されます。

height: 100%: 要素の高さを 100% に設定します。
position: absolute: 要素を相対的な位置に配置します。
top: 0: 要素を親要素の上部に配置します。

例

<html>
<head>
<style>
html, body {
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}
</style>
</head>
<body>
<div class="container">
  <h1>タイトル</h1>
  <p>本文</p>
</div>
</body>
</html>

この例では、html と body 要素の高さは 100% に設定されています。 .container 要素は絶対的な位置に配置され、親要素の上部と左側に配置されます。また、幅は 100% 、最小高さは 100% に設定されています。

利点

100% 最小高さ CSS レイアウトには、以下のような利点があります。

画面サイズやブラウザのウィンドウサイズに関わらず、コンテンツが常に画面全体を覆うように表示される。
シンプルで分かりやすいレイアウト手法である。
レスポンシブ Web デザインに適している。

欠点

縦方向のスクロールバーが表示されない場合がある。
コンテンツが少ない場合、余白が目立ってしまう場合がある。

注意点

html と body 要素の高さは 100% に設定する必要がある。
コンテンツの高さが 100% よりも低い場合、余白が目立ってしまう可能性がある。
縦方向のスクロールバーが必要かどうかを考慮する必要がある。

応用

100% 最小高さ CSS レイアウトは、様々なレイアウトに適用することができます。例えば、以下のようなレイアウトに使用できます。

ヘッダーとフッターを常に画面上部と下部に表示するレイアウト
サイドバーとメインコンテンツを並べて表示するレイアウト
フルスクリーンの背景画像を表示するレイアウト

関連技術

CSS グリッドレイアウト
Flexbox

100% 最小高さ CSS レイアウトサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% 最小高さ CSS レイアウト サンプル</title>
  <style>
    html, body {
      height: 100%;
    }

    .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100%;
      background-color: #f0f0f0;
    }

    .header {
      height: 100px;
      background-color: #333;
      color: #fff;
    }

    .content {
      padding: 20px;
    }

    .footer {
      height: 100px;
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>タイトル</h1>
    </div>
    <div class="content">
      <p>本文</p>
      <p>本文</p>
      <p>本文</p>
    </div>
    <div class="footer">
      フッター
    </div>
  </div>
</body>
</html>

このコードでは、以下のレイアウトを実現しています。

コンテンツは画面全体を覆うように表示される。
コンテンツが少ない場合でも、余白が目立たないように背景色を設定している。

100% 最小高さ CSS レイアウトの代替方法

vh 単位を使用する

vh 単位は、ブラウザのウィンドウ高さを基準とした相対的な単位です。この単位を使用することで、画面サイズに関わらず、コンテンツの高さを常に 100% に保つことができます。

.container {
  height: 100vh;
}

calc() 関数を使用することで、要素の高さを動的に計算することができます。例えば、以下のコードは、ヘッダーとフッターの高さの合計から 100px を引いた値をコンテンツの高さに設定しています。

.content {
  height: calc(100vh - 100px - var(--header-height) - var(--footer-height));
}

JavaScript を使用することで、コンテンツの高さを動的に設定することができます。例えば、以下のコードは、ブラウザのウィンドウサイズが変更された時に、コンテンツの高さを再設定しています。

window.addEventListener('resize', function() {
  const content = document.querySelector('.content');
  content.style.height = window.innerHeight - 100 + 'px';
});

どの方法を選択するべきかは、プロジェクトの要件や状況によって異なります。以下のような点を考慮する必要があります。