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>