高さ100%にするCSS解説

HTML、CSSにおけるブラウザの高さを100%にする方法（日本語）

HTML、CSSにおいて、要素の高さ（height）をブラウザの高さと一致させる方法は、主にCSSのパーセント値を使用します。

HTMLの構造

まず、HTMLの構造内で、高さを調整したい要素（例えば、<div>）を適切な場所に配置します。

<div class="full-height">
  </div>

CSSのスタイル

次に、CSSを使用して、要素の高さをブラウザの高さに設定します。

.full-height {
  height: 100%;
}

このスタイルにより、.full-heightクラスを適用した要素が、ブラウザの高さの100%に設定されます。

注意

• ブラウザのビューポート
  ブラウザのビューポート（表示領域）の高さが異なる場合、それに応じてスタイルを調整する必要があるかもしれません。
• 親要素の高さ
  height: 100%を適用する要素の親要素も、高さの指定が必要な場合があります。親要素の高さも100%に設定することで、子要素がブラウザの高さに適切にフィットします。

例

<div class="container">
  <div class="full-height">
    </div>
</div>

.container {
  height: 100vh; /* ブラウザのビューポートの高さ */
}

.full-height {
  height: 100%;
}

<div class="full-height">
  </div>

.full-height {
  height: 100%;
}

<div class="container">
  <div class="full-height">
    </div>
</div>

.container {
  height: 100vh; /* ブラウザのビューポートの高さ */
}

.full-height {
  height: 100%;
}

<div class="full-height">
  </div>

.full-height {
  height: 100%;
}

<div class="container">
  <div class="full-height">
    </div>
</div>

.container {
  height: 100vh; /* ブラウザのビューポートの高さ */
}

.full-height {
  height: 100%;
}

他の方法

• Viewport Units
  vh、vw、vmin、vmaxなどのビューポート単位を使用することで、ブラウザのビューポートのサイズに基づいて要素の高さを設定することができます。
• Grid
  Gridレイアウトも、要素をブラウザの高さにフィットさせるための方法の一つです。
• Flexbox
  Flexboxを使用することで、要素をブラウザの高さにフィットさせることができます。

Flexboxの例

.container {
  display: flex;
  height: 100vh;
}

.full-height {
  flex: 1; /* 1つの要素がブラウザの高さにフィット */
}

Gridの例

.container {
  display: grid;
  height: 100vh;
  grid-template-rows: 1fr; /* 1つの行がブラウザの高さにフィット */
}

.full-height {
  grid-row: 1; /* 1行目の要素 */
}

Viewport Unitsの例

.full-height {
  height: 100vh; /* ブラウザのビューポートの高さ */
}