Webサイトの要素の高さをウィンドウ全体にするときの計算で0.01を掛ける理由

Question

知りたいこと

Webサイトのコーディングの勉強をしています。

問題なく動作するのですが、何故こういう記述をするのか気になったので質問します。

PCでもスマホでも画面の高さいっぱいに要素を表示させる方法として、以下の方法があることを知りました。

.sample {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100));
}

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

「window.innerHeigh」で高さを取得し、0.01を掛けてから、その後で100を掛けて画面の高さを指定しています。

複数のサイトでこの方法を紹介していたので、これが定石だと思ったのですが、

何故、一度0.01を掛けてから100を掛けて戻すのでしょうか？

「window.innerHeight」で取得した高さをそのまま使うと、何か不具合が生じるのでしょうか？

調べても分からなかったため、質問させていただきました。

よろしくお願いします。

Answer 1

単にvhという単位と合わせるため（画面全体の高さ=100vh）と思われます。

Comments

[tagui]

ありがとうございます！
単位と合わせるためということでしたら、例えば、0.01の計算はせずに

height: var(--vh, 100vh);

のような指定でも問題ないということでしょうか？
こういう記述のサイトが見当たらなかったので、何故0.01を掛けるんだろう？と不思議に思ったのです。

[maisumakun]

技術的には問題ありませんが、そうするなら「vh」という名前は変えたほうがいいと思います。

[tagui]

確かにそうですね。納得しました。
ありがとうございます。