CSS：divの高さを表示領域かコンテンツの内容に合わせたい

divタグでコンテンツを囲んであり、左右の境界線を表示しています。
コンテンツの内容が多くてスクロールする場合は画面の下まで左右の境界線が表示されるので、違和感を感じません。
コンテンツの内容が画面の半分くらいの高さで終わってしまう場合、左右の境界線も途中で終わってしまうので、違和感がありました。

viewport heightを指定する

JavaScriptで表示領域の高さを取得してdivのheightを指定するしか方法がないかと思いながら検索すると、CSSでheightに100%を指定する方法が見つかりました。
紹介されている記事を読んでいくと、「viewport height」というのが表示領域の高さに対する割合を指示できて、CSSでは

#box {
    height: 100vh;
}

と100vhと書くと100％になることがわかりました。

Jantine Doornbos

さらに、コンテンツの内容が多くて縦スクロールが発生する場合は、min-heightで指定すれば対応できることもわかりました。

#box {
    min-height: 100vh
}

CSSだけで対応できるのは簡単にできてありがたいです。