[HTML] Webページでウィンドウの高さに合わせて表示させたいとき

ブラウザのウィンドウサイズはディスプレイごとに異なっていますが、Webページ上のある部分を必ずウィンドウの高さ一杯に表示させたい場合があります。そのような場合に必要なcssの設定です。

ここではページの幅が960pxで、あるページの高さの70%分をウィンドウ一杯に表示させて、残りの30%は画面をスクロールすることで見えるようにする場合を考えます。

<!-- body要素内 -->
<div id="container">
  <div class="first-view">
    （first viewで見せたい部分）
  </div>
  <div class ="hidden-view">
    （first viewでは隠れてる部分）
  </div>
</div>

CSSは次のようになります。

* {
  margin: 0 auto;
}

html,
body {
  height: 100%;
}

#container {
  width: 960px;
  height: 143%;
  background-color: #f9f;
  
}

.first-view {
  width: 960px;
  height: 70%;
  min-height: 70%;
  background-color: #9ff;
}

.hidden-view {
  width: 960px;
  height: 30%;
  background-color: #999;
}

大切なのはhtmlとbody要素に対して100%を指定することです。CSSの仕様として高さの指定は親要素の高さに依存します。heightの初期値はautoなので内容に依存することになり、htmlやbodyに100%を指定しておかないとウィンドウの高さいっぱいには広がりません。

そして.first-viewと.hidden-viewにはそれぞれWebページ全体に対する高さの比率をheightで指定します。当然ですが、.first-viewのheightの数値とhidden-viewのheightの数値は足すと100%になるようにしてください。

containerのheightには.first-viewのheightの逆数を指定します。first-viewのheightがウィンドウの高さいっぱいに対応するようにしたいので、containerのheightはウィンドウの高さに対して100%以上になることになります。『ウィンドウの高さに対するページ全体の高さの比率』が#containerのheightです。