CSS Grid・Flexbox・position: absoluteの比較！body要素の高さを100%に設定する方法

2024-04-02

HTML、CSS、height を使ってブラウザの高さ100%のbodyを作る方法

この解説では、HTMLとCSSを使って、body要素の高さをブラウザの高さ100%に設定する方法を紹介します。

方法

大きく2つの方法があります。

height: 100% を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body</title>
  <style>
    body {
      height: 100%;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody</h1>
  <p>このページは、body要素の高さを100%に設定することで、ブラウザの高さに合わせて表示されます。</p>
</body>
</html>

この方法では、body要素にheight: 100%を指定することで、body要素の高さをブラウザの高さに設定します。

注意点

この方法は、すべてのブラウザで正しく動作するわけではありません。古いブラウザでは、height: 100%が正しく解釈されない場合があります。

vh単位を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with vh</title>
  <style>
    body {
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (vh)</h1>
  <p>このページは、body要素の高さを100vhに設定することで、ブラウザの高さに合わせて表示されます。</p>
</body>
</html>

vhは、viewport heightの略で、ブラウザの高さの1%を表します。

メリット

vh単位を使う方法は、すべてのブラウザで正しく動作します。

vh単位は、ブラウザの高さのみを基準にしているので、スクロールバーの分だけ高さが小さくなります。

height: 100%とvh単位のどちらを使うかは、ブラウザの互換性とスクロールバーの有無を考慮して選択する必要があります。

height: 100%とvh単位以外にも、JavaScriptを使ってbody要素の高さを設定する方法もあります。
height: 100%とvh単位を組み合わせて使うこともできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body</title>
  <style>
    body {
      height: 100%;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody</h1>
  <p>このページは、body要素の高さを100%に設定することで、ブラウザの高さに合わせて表示されます。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with vh</title>
  <style>
    body {
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (vh)</h1>
  <p>このページは、body要素の高さを100vhに設定することで、ブラウザの高さに合わせて表示されます。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with vh and 100%</title>
  <style>
    html,
    body {
      height: 100%;
    }
    body {
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (vh and 100%)</h1>
  <p>このページは、html要素とbody要素にそれぞれ`height: 100%`と`height: 100vh`を指定することで、ブラウザの高さに合わせて表示されます。</p>
</body>
</html>

JavaScript を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with JavaScript</title>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (JavaScript)</h1>
  <p>このページは、JavaScriptを使ってbody要素の高さをブラウザの高さに設定しています。</p>
  <script>
    (function () {
      var body = document.body;
      var height = window.innerHeight;
      body.style.height = height + 'px';
    })();
  </script>
</body>
</html>

このサンプルコードでは、html要素とbody要素にそれぞれheight: 100%とheight: 100vhを指定することで、ブラウザの高さに合わせて表示されます。

CSS Grid を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with CSS Grid</title>
  <style>
    body {
      display: grid;
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (CSS Grid)</h1>
  <p>このページは、CSS Gridを使ってbody要素の高さをブラウザの高さに設定しています。</p>
</body>
</html>

Flexbox を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with Flexbox</title>
  <style>
    body {
      display: flex;
      height: 100vh;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (Flexbox)</h1>
  <p>このページは、Flexboxを使ってbody要素の高さをブラウザの高さに設定しています。</p>
</body>
</html>

position: absolute を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>100% Height Body with position: absolute</title>
  <style>
    body {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <h1>ブラウザの高さ100%のbody (position: absolute)</h1>
  <p>このページは、position: absoluteを使ってbody要素の高さをブラウザの高さに設定しています。</p>
</body>
</html>