HTMLとCSSでWebページの高さを画面の高さにぴったり合わせる方法

Webページ全体の高さをブラウザの画面（ビューポート）の高さにぴったり合わせたい場面は多くあります。例えば、フルスクリーンのランディングページやヒーローセクションを作成する場合などです。ここでは、代表的な3つの実装方法をわかりやすく解説します。

方法1：html要素とbody要素に相対的な高さ（%）を指定する

最も基本的な方法は、html 要素と body 要素に対して、親要素を基準とした相対的な高さである 100% を指定することです。これにより、ページ全体が画面の高さいっぱいに広がります。

html, body {
    height: 100%;
}

この方法を使う場合、子要素にも height: 100% を指定すれば、親の高さを基準にレイアウトを組み立てられます。

方法2：position: fixed を使って固定配置する

position: fixed; を利用すると、要素をビューポート基準で固定できます。上下左右すべてを 0px に設定することで、画面全体に要素が広がります。

#main {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

この方法は要素がスクロールしても画面に固定されるため、全画面オーバーレイやモーダル表示などに適しています。ただし、通常のドキュメントフローから外れる点には注意が必要です。

方法3：ビューポート単位（vh）を使用する

最もシンプルで現代的な方法は、CSSのビューポート単位 vh（viewport height）を使うことです。1vh はビューポートの高さの1%を表すため、100vh を指定すると画面の高さちょうどになります。

.element {
    height: 100vh;
}

特定の要素だけを画面いっぱいにしたい場合に便利で、HTMLやbodyへの追加設定も不要です。

まとめ

ページ全体を対象にするなら「方法1」、固定表示が必要なら「方法2」、特定の要素を画面の高さに合わせたいなら「方法3」がおすすめです。用途に応じて使い分けることで、柔軟なフルスクリーンレイアウトを実現できます。