脱力系備忘録BloG ホーム » HTML・CSS »CSSで画面一杯高さ100%の領域を確保する方法

CSSで画面一杯高さ100%の領域を確保する方法  

CSSで画面一杯の領域を確保するのって意外と悩ましい問題。

今まで
html,body { height: 100%; }
ってやって、
div { height: 100%; }
とかやってましたが、これって領域を入れ子で複数用意するとずれたりするんですよね。

しかし、すっごくかんたんに解決する方法がありました。
Viewport units」という単位です。
ええ、すっげーいまさらな話です。でも、私は今日知ったので仕方がない。

使い方はきわめて簡単。
以下の例を試してください。

<html>
<body>
<div style="height: 100vh; background-color: #000000;"></div>
</body>
</html>

お勉強は常にせなあかんね。
関連記事

category: HTML・CSS

この記事へのコメント

コメントの投稿

非公開コメント

コメントは全て管理人が内容を確認してから表示されます(非公開コメント除く)。
内容によっては表示されない場合がありますことご了承願います。

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop