cssの大きさを示す単位、いくつ知っていますか？
px, %, rem, em, pt...
%以外は要素そのものの値を基準に決まりますね。

その中でも vh, vw の２つは画面（Viewport）の大きさでサイズが変わるという特異な性質を持っています。
これは便利！ width: 100vw; とかしたくなりませんか？

ところがこの vh と vw 、気をつけて使わないと罠があります。

vh, vw とは

Viewportに対する100分率で指定できます。
vhは画面の高さ、vwは画面の幅を基準にします。

100vhなら高さ画面いっぱい、100vwなら幅画面いっぱい、ですね。

甘い罠

さて、使いたくなるところを考えてみましょう。
親のBoxに左右されず100%っぽく指定できるので、 width: 100vw とかしたくなりますね！
あとは１画面分のファーストビュー前面に出すための height: 100vh とかでしょうか？

ところがですよ、主にPCでの vw, SPでの vh には罠があります。

端末	（おそらく）開発者が意図しないもの
PC	スクロールバー
SP	アドレスバー

QiitaのHeaderを開発者ツールで開いて、div.st-HeaderContainerを選択しましょう。

横スクロールバーが出てしまいました。
実はこれ、100vwには縦スクロールバー分の横幅を含めた範囲なのでレンダリングの範囲より大きいのです。
証拠に、画面の要素をどんどん消していって、スクロールバーを消せばピッタリ収まります。
中に要素が増えていったら発覚するので性質が悪いと言えるでしょう。

SPのvhはもっとひどいです。vhはデバイスの高さによってきまります。
しかしレンダリングされる高さは アドレスバーを除きます。

PCのレスポンシブビューを使ってSPサイトを開発していると気づかないことがあるので注意してください。

この記事の解説図がめちゃくちゃわかりやすいので是非見てください。
【CSS】100vhは「一画面」ではないという罠 | JavaScriptに関するお知らせ

上記を考えると、SP向けモーダルウィンドウ（ポップアップウィンドウ）の実装なんかには便利なのではないでしょうか。
PC向けを考えると max-width や max-height に固定値pxを指定するといった運用も考えられます。

vhやvwはあとになって問題が発覚することがあります。
vh, vw のいずれも使わずに済むようにコーディングできるならそれに越したことはないでしょう。
（ position: absolute をうまく使えば親boxに左右されず、100% = 画面幅 のboxを作れると思います）

/* style設定例（body直下にメインビジュアルの要素がある場合） */
html,body {
  height: 100%;
}
/* メインビジュアルスタイルのスタイル */
.hoge {
  height: 100%;
}