CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素をブラウザウィンドウの高さ全体に広げる方法をわかりやすく解説

CSSを使って要素をブラウザウィンドウの高さ全体に広げるには、html 要素と body 要素の高さを 100% に設定した上で、対象の要素にも height: 100% を指定します。以下に具体的な実装例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    *{
        box-sizing: border-box;
    }
    html, body {
        height: 100%;
        margin: 0;
    }
    .fullHeight{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 100%;
        background: rgb(135, 27, 207);
        color: white;
        font-size: 40px;
        padding: 40px;
    }
</style>
</head>
<body>
<div class="fullHeight">このdiv要素はウィンドウの高さと幅全体に広がります</div>
</body>
</html>

出力結果

上記のコードを実行すると、紫色の背景を持つdiv要素がブラウザウィンドウの高さと幅いっぱいに表示されます。

CSSで要素をブラウザウィンドウの高さ全体に広げる方法をわかりやすく解説

コードのポイント

  • html・body に height: 100% を指定：パーセントによる高さ指定は親要素を基準に計算されるため、親にあたる html と body にも height: 100% を設定する必要があります。
  • margin: 0 で余白をリセット：ブラウザのデフォルトの余白を消し、意図しないスクロールバーの表示を防ぎます。
  • box-sizing: border-box を指定：padding を含めて高さが計算されるため、padding: 40px を指定しても要素がウィンドウからはみ出しません。

補足：100vhを使ったモダンな方法

近年のブラウザでは、ビューポート単位の 100vh を使う方法も便利です。親要素の高さ設定が不要になり、次のように1行で指定できます。

.fullHeight {
    height: 100vh;
}

ただし、モバイルブラウザではアドレスバーの表示・非表示によって 100vh の高さが変動する場合があります。用途に応じて height: 100% 方式と使い分けるとよいでしょう。

  1. CSSで要素をブラウザウィンドウの高さ全体に広げる方法をわかりやすく解説

    CSSを使って要素をブラウザウィンドウの高さ全体に広げるには、html 要素と body 要素の高さを 100% に設定した上で、対象の要素にも height: 100% を指定します。以下に具体的な実装例を示します。 コード例 <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> *{ box-sizing: border-box; } html, body { height: 100%;

  2. CSSでウィンドウの高さ100%のDIVを作成する方法

    CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。heightプロパティの構文CSSのheightプロパティは、次のように記述します。Selector {    height: /*値*/ }値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設