用途
新着
履歴
言語


CSS デバイスの高さまで縦を広げる

CSS デバイスの高さまで縦を広げる
CSS デバイスの高さまで縦を広げる
CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。

100vhを指定するとデバイスの縦幅いっぱいの高さとなります。

以下の親要素(破線の部分)の高さは300pxを指定しています。

height:100%;
height:100vh;

100%の場合は、親要素に対して目一杯の縦幅をとります。

対して100vhは、PCならブラウザの高さ、スマホなら画面の高さとなにがなんでも同じになります。

HTMLはこちら

<div class="demo_space">
    <div class="demo_h_percent">height:100%;</div>
    <div class="demo_vh blue">height:100vh;</div>
</div>

CSSはこちら

<style>
        .demo_space{
            height:300px;
            border:dashed 5px #777;
            padding:10px;
            box-sizing:border-box;
        }
        .demo_h_percent{
            height:100%;
            width:50%;
            float: left;
            color:#FFF;
            background-color:#00F;
            padding:50px 20px;
            box-sizing:border-box;
        }
        .demo_vh{
            height:100vh;
            width:50%;
            float: left;
            color:#FFF;
            background-color:#F00;
            padding:50px 20px;
            box-sizing:border-box;
            z-index: 100;
        }
        </style>

公開 : 2019-12-01 16:00:37
更新 : 2019-12-02 09:56:44
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2019 kipure
Top