解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題

如果我們想要把內容鎖定在一個頁面的高度，在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，但 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發有一部分被遮掉了，這個用這張圖來看就很清楚。

在其他瀏覽器上則是一個螢幕高會扣掉 header 跟下面的主選單部分，也會是我們比較預期的狀況，查了一下這在 safari 是一個一直存在的問題，後來連手機的 chrome 也會有這樣的情況，還好後來有找到方法試了一下有用就紀錄一下。

CSS 要改這樣

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

再加一段 js 去判斷要調整的高度。

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

有興趣研究原理的話可以看這篇：
The trick to viewport units on mobile