viewport-units を使ってデバイスの画面サイズに関係なくレイアウトを一定に保つ方法
CSS3 の 100vh は、画面の高さの 100% を表す単位です。しかし、モバイルブラウザでは、アドレスバーやツールバーなどの UI 要素が画面の高さに含まれるため、100vh は一定ではなく、スクロールによって変化します。原因モバイルブラウザでは、画面の高さは、デバイスの物理的な高さではなく、ウィンドウの高さによって決定されます。ウィンドウの高さは、アドレスバーやツールバーなどの UI 要素によって変化するため、100vh も変化します。