CSSで画面一杯高さ100%の領域を確保する方法
2017/12/08 Fri.
CSSで画面一杯の領域を確保するのって意外と悩ましい問題。
今まで
html,body { height: 100%; }
ってやって、
div { height: 100%; }
とかやってましたが、これって領域を入れ子で複数用意するとずれたりするんですよね。
しかし、すっごくかんたんに解決する方法がありました。
「Viewport units」という単位です。
ええ、すっげーいまさらな話です。でも、私は今日知ったので仕方がない。
使い方はきわめて簡単。
以下の例を試してください。
<html>
<body>
<div style="height: 100vh; background-color: #000000;"></div>
</body>
</html>
お勉強は常にせなあかんね。
今まで
html,body { height: 100%; }
ってやって、
div { height: 100%; }
とかやってましたが、これって領域を入れ子で複数用意するとずれたりするんですよね。
しかし、すっごくかんたんに解決する方法がありました。
「Viewport units」という単位です。
ええ、すっげーいまさらな話です。でも、私は今日知ったので仕方がない。
使い方はきわめて簡単。
以下の例を試してください。
<html>
<body>
<div style="height: 100vh; background-color: #000000;"></div>
</body>
</html>
お勉強は常にせなあかんね。
- 関連記事
category: HTML・CSS
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
![【Amazon.co.jp限定】『ゴジラ-1.0』 豪華版 3枚組 （Amazon限定：アクリルスタンド+ビジュアルシート付き、メーカー特典：名セリフステッカー付き) [Blu-ray]](https://m.media-amazon.com/images/I/81Sg1SwkmiL._AC_SL1500_.jpg)
