用途
新着
履歴
分類

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
このページの二次元コード
CSS デバイスの高さまで縦を広げる

人気のサンプル

search -  category -  about
© 2024 kipure
Top