Cssの新しい単位vw, vh, vmin, vmax

今までの％ではなく新しい単位があります。

• vw viewport width ビューポートの幅に対する割合
• vh viewport height ビューポートの高さに対する割合
• vmin viewport minimum ビューポートの幅と高さのうち、値が小さい方に対する割合
• vmax viewport max ビューポートの幅と高さのうち、値が大きい方に対する割合

％と同じように、100vh/100vwは画面に対して100％で表示されます。

％との大きな違いは、height=高さに対して、
「height：100vw」と設定できます。
横幅100%に合わせて高さを指定できる事ができます。
画像の基準を高さにするか？
横幅にするか？
これを指定できることにより画像の見せ方を決める事ができます。

サイトのメイン画像を、立ていっぱいに表示したい時!!
スマホで開いた時に、画像が下までいっぱいに表示させたい場合などに使用します。

.sample {
height: 100vh;
}

各セクションをページいっぱいに表示させ、Javascriptを加えることで
1ページづつスクロールする事ができます。

.section {
width: 100%;
height: 100vh;
}