ウィンドウの高さに応じて枠の高さを変える

概要

Webブラウザのウィンドウの高さに応じてページ内の枠の高さを変更したい場合があります。 CSSのheightプロパティと vh単位を利用すると、Webブラウザの縦の大きさに応じて枠の高さを変更できます。

書式

height: [nn]vh;

[nn]は数値が入ります。100でWebブラウザのビューポートの高さになります。 vh単位の詳細についてはこちらの記事を参照してください。

実装例

コード

以下のHTMLファイル、CSSファイルを作成します。

FrameHeightAdjustPageHeight.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="FrameHeightAdjustPageHeight.css" />
</head>
<body>
  <div class="OuterContainer">
    <h3>ウィンドウの高さに連動して枠の高さを変えるデモ</h3>
    <div class="InnerContainer">
      <div class="ContentText">123</div>
      <div class="ContentText">456</div>
      <div class="ContentText">789</div>
      <div class="ContentText">012</div>
    </div>

    <h6>iPentec.com</h6>
  </div>
</body>
</html>

FrameHeightAdjustPageHeight.css

.OuterContainer {
  margin: 1rem 1rem 1rem 1rem;
  border:2px solid #ffa400;
}

.InnerContainer {
  border: 2px solid #ca0000;
  height: 50vh;
}

.ContentText {
  padding: 1rem 0 1rem 0;
}

解説

このページは2つの枠を表示します。外側のOuterContainer枠がオレンジ色の枠です。内部のInnerContainerが赤色の枠です。この枠のheightプロパティに 50vhを設定し、ウィンドウの高さの半分の高さにします。
ウィンドウのサイズを変えると枠の高さも自動で変わることを核にします。

実行結果

上記のHTMLファイルをWebブラウザで表示します。
ウィンドウの高さに応じて枠の高さを変える:画像1

ウィンドウの高さを広げると枠の高さも広がります。
ウィンドウの高さに応じて枠の高さを変える:画像2

ウィンドウの高さを狭くすると、枠の高さも狭まります。枠が狭まった場合、枠内の文字列などのコンテンツは枠をはみ出して表示されてしまうことに注意が必要です。
ウィンドウの高さに応じて枠の高さを変える:画像3
ウィンドウの高さに応じて枠の高さを変える:画像4

CSSでウィンドウの高さに連動して枠の高さが変化する枠を作成できました。