ページ内の特定の要素を「ブラウザ画面の高さ100%」で表示させたい場合を考えます。
（各要素は通常フローで配置されているものとします）
期待通りの表示にならないCSS
以下のようなCSS指定が思いつきますが、この場合 .fullheight 要素はブラウザ画面の高さ100%にはなりません。
body {
margin: 0;
}
.fullheight {
height: 100%;
background: #bbddff;
}
<body>
<div class="fullheight">
高さ100%で表示したい要素
</div>
</body>
See the Pen qiita_205fed63b886681661bd_01 by Sho Uchida (@shouchida) on CodePen.
期待通りの表示となるCSS
以下のように、html要素とbody要素に height: 100%; を指定すると、期待通りの表示結果となります。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.fullheight {
height: 100%;
background: #bbddff;
}
<body>
<div class="fullheight">
高さ100%で表示したい要素
</div>
</body>
See the Pen qiita_205fed63b886681661bd_02 by Sho Uchida (@shouchida) on CodePen.
height に相対値（%）が指定された場合の高さの算出
このような height プロパティの振る舞いは、もちろんCSSの仕様として決められているものです。
ある要素の height に相対値（%）が指定された場合、その高さは包含ブロックの高さに対して計算されます。
その要素が通常フローで配置されており、かつ包含ブロックの高さが明示されていない場合、要素の高さは auto として計算されます。
なお、包含ブロックについては下記の記事が詳しいです。
最初の例では、.fullheight の包含ブロックである <body> に height が明示されていなかったため、height: auto; と同様の結果となっていました。
包含ブロックに height が明示されている場合
.fullheight の包含ブロックとなる .wrapper を新たに設置し、height: 500px; を指定してみます。
さらに .fullheight に対しては height: 80%; と指定しましょう。
この場合、.fullheight 要素の高さは**「500px の 80% ＝ 400px」**として計算されます。
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 500px;
background: #99bbee;
}
.fullheight {
height: 80%;
background: #bbddff;
}
<body>
<div class="wrapper">
<div class="fullheight">
高さ80%で表示したい要素
</div>
</div>
</body>
See the Pen qiita_205fed63b886681661bd_03 by Sho Uchida (@shouchida) on CodePen.
では、上記の状態から、さらに要素をひとつ増やす（.inner）とどのような表示になるでしょうか？
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
.wrapper {
height: 500px;
background: #99bbee;
}
.inner {
/* height指定無し */
}
.fullheight {
height: 100%;
background: #bbddff;
}
<body>
<div class="wrapper">
<div class="inner">
<div class="fullheight">
高さ80%で表示したい要素
</div>
</div>
</div>
</body>
See the Pen qiita_205fed63b886681661bd_04 by Sho Uchida (@shouchida) on CodePen.
先ほどと同じ結果になりそうな気もしますが、.fullheight の包含ブロックとなる .inner に height が明示されていないため、.fullheight の高さは auto として計算されます。
まとめ
通常フローで配置された height: 100%; の要素を「ブラウザ画面の高さ100%」で表示させたい場合、ブロックボックスを形成する祖先要素それぞれに対しても height: 100%; を指定する必要があります。