Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

ブラウザのウィンドウサイズはディスプレイごとに異なっていますが、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です。

Yuki_Yamashina
昔は素粒子物理の研究員してました。2014年3月に退職後、ウェブの世界に入ってはや4年。最近は WordPress + AMP HTML でホームページ作ったり React/Vue.js でウェブアプリ作ったり、React Native でモバイルアプリを作ったりしてます。
https://yukiyuriweb.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした