記事内に広告が含まれています。

height:100%が効かない！CSSのheightの使い方について

Jun 7, 2019

CSS,HTML,JS , コーディング

height:100%を使って上手くいかないことが多くて、ちょっと苦労したので、改めてheightの使い方について勉強しました。
勉強したことを整理するために、記事にしようと思います。

ポイントは単位による指定方法の違いでした！

heightの主な単位

まず単位ですが、heightでは下記3つの単位がよく使われます。

px（ピクセル）
%（パーセント）
vh（viewport height）

単位によって指定方法が異なり、正しく指定しないとheightが効きません。
この記事では、この3つの単位の使い方をサンプルコードを元に順番にご説明していきます。

pxと%では指定方法が違う

pxは絶対値で指定、%は相対値で指定します。
%で指定した場合は、相対値、つまり親要素に対して何パーセントか、ということなので親要素にもheightを指定します。

pxは絶対値による指定なので、親要素にheightがなくても指定した通りに表示されます。

pxと%、指定を混同しがちで%で指定した時、親要素にheightを指定していなくてheight:100%が効かない！って思ってしまったりします。
（私がそうでした///。。。）

POINT

heightはpxと%で指定方法が違う

pxは絶対値で指定、%は相対値で指定

%で指定した時は、その親要素にもheightを指定する！

では、具体的に見ていきましょう。

px（ピクセル）で指定したとき

See the Pen KLZOXE by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>
    <div class="sample01">
      sample01
    </div>    
  </body>
</html>

*{
  margin:0;
  padding:0;
}
.sample01{
  background-color:#f00;/*背景赤色*/
  color:#fff;
  width:200px;
  height:250px;
}

CSSの1行目から4行目は、ブラウザによる隙間の差異をなくすための記述で、隙間を0にしています。
この記事のテーマとそれるので説明は省略しますが、cssの最初に記述することが多いです。

CSSの5行目以降で、div.sample01に背景赤色、横幅200px、高さ250pxを指定しており、その通りに表示されています。

%（パーセント）で指定したとき

See the Pen NVXQyE by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>   
    <div class="sample02">
      sample02
    </div>    
   </body>
</html>

*{
  margin:0;
  padding:0;
}
.sample02{
  background-color:#f00;/*背景赤色*/
  color:#fff;
  width:200px;
  height:100%;/*←ここだけsample01と違う*/
}

上記sample02は、sample01のコードと同じですが、heightだけ100%に変更しました。（上記CSSの9行目）
背景色赤をフレームの高さいっぱいに表示しようと、height:100%を指定しましたが、効いていません。

では、sample02を意図した通りにフレームの高さいっぱいに表示するにはどうすればいいのでしょうか？
それは、%は相対値で指定するので、親要素にもheightを指定します。

%で指定、だから親要素にもheightを指定する
(pxと%、両方の単位を使ったとき)

See the Pen GaxNbe by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>   
    <div class="wrap">
     <div class="sample03">
       sample03
     </div>  
    </div>  
   </body>
</html>

*{
  margin:0;
  padding:0;
}
.wrap{
  background-color:#00f;/*背景青色*/
  width:300px;
  height:250px;/*←ピクセルで指定*/
}
.sample03{
  background-color:#f00;/*背景赤色*/
  color:#fff;
  width:200px;
  height:100%;/*←パーセントで指定*/
}

上記sample03は、先程のsample02のhtmlコードにdiv.wrapを追加したものです。
div.wrapは、div.sample03の親要素ということになります。

CSSは、5行目から9行目にdiv.wrapの指定を追加しました。

ここで注目したいのは、CSS8行目div.wrapにheight:250pxとピクセルで指定しており、更に14行目、div.sample03にはheight:100%とパーセントで指定しているところです。

上記の表示結果を見ると、div.wrap（青）のheight:250pxに、子要素であるdiv.sample03（赤）のheightが100%に（青に重なって）表示されています。

つまり、pxでの指定は絶対値による指定なので、その親要素にheightがなくても250pxで表示され、 %での指定は相対値による指定なので、div.sample03の親要素div.wrapの100%で表示されています。

height:100%を使って、ウィンドウの高さいっぱいに表示するには

では、ウィンドウの高さいっぱいに表示するにはどうすればいいのでしょうか。
それは、親要素全てにheight:100%を指定します。

See the Pen dEdPQz by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>
    <div class="wrap">
    <div class="sample04">
      sample04
    </div>      
       </div> 
  </body>
</html>

*{
  margin:0;
  padding:0;
}
html{
  height:100%;
}
body{
  height:100%;
}
.wrap{
  height:100%;
}
.sample04{
  background-color:#f00;
  color:#fff;
  width:100%;
  height:100%;
}

div.sample04の親要素であるdiv.wrapにもbodyタグにも、htmlタグにもheight:100%を指定します。

上記はdiv.wrapの入れ子にしていますが、bodyタグの直下に記述したならbodyタグとhtmlタグにhegiht:100%を指定します。

POINT

height:100%を使って、ウィンドウの高さいっぱいに表示する方法

親要素全てにheight:100%を指定する。

画像の場合は注意 ) 上記のsample04は背景色にwidth:100%と横幅も100%に指定しているので全画面赤色になっていますが、画像の場合、上記のコードでは歪んでしまったり左寄せになってしまったりします。
画像を全画面に中央に表示する方法は、別記事で書いていますのでよかったらご覧ください。

『画像を画面いっぱいに(フルスクリーン)表示するHTMLとCSS』-NATSUKIMEMO

vhで指定したとき

vhは「viewport height」の頭文字をとったもので、ビューポートの高さを指定する単位です。

ビューポートとはウィンドウの表示領域のことで、vhを単位に指定するとPCやスマホなどデバイスが違ってもそれごとに表示領域の数値が算出されます。
height:100vh;とは表示領域の高さ100%に、という指定になります。
スマホやタブレットなど様々なサイズのあるデバイスで活躍するレスポンシブな単位で、簡単に言うとheight:100vhを指定すると、スマホの向きを縦にしようが横にしようが、ブラウザの高さいっぱいに要素を表示してくれます。

下記のsample05は、vhで高さいっぱいに表示しています。

See the Pen vwjOMa by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>   
    <div class="sample05">
      sample05
    </div>         
  </body>
</html>

*{
  margin:0;
  padding:0;
}
.sample05{
  background-color:#f00;
  color:#fff;
  width:300px;
  height:100vh;
}

CSS9行目でheight:100vhを指定しています。
ここで注目したいのは、親要素にheightを指定していないことです。

これは、viewportの場合、表示領域に対して何パーセントか、ということなので親要素に指定する必要がありません。
親要素にheightを指定しても、それは無視され、あくまで表示領域であるウィンドウを基準に高さが算出されます。

下記のsample06は親要素div.wrapにpxでheightを指定しています。

See the Pen qGLmPK by natsuki (@natsukimemo) on CodePen.

<html>
  <head></head>
  <body>   
    <div class="wrap">
     <div class="sample06">
      sample06
     </div>
    </div> 
  </body>
</html>

*{
  margin:0;
  padding:0;
}
.wrap{
  background-color:#00f; /*背景青色*/
  width:400px;
  height:200px;  
}
.sample06{
  background-color:#f00; /*背景赤色*/
  color:#fff;
  width:300px;
  height:100vh;
}

上記CSS8行目、div.wrapにheight:200pxを、14行目でdiv.sample06にheight:100vhを指定しています。
div.sample06は親要素の200pxは無視して、ウィンドウの高さいっぱいに背景赤色を表示しています。