E=mc² 的日常: 解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題

CSS 自定義屬性：調整大小的技巧

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

在 JavaScript 中，您始終可以通過使用全局變量來獲取當前視口的值window.innerHeight。該值將瀏覽器的界面考慮在內，並在其可見性更改時更新。訣竅是將視口值存儲在 CSS 變量中，並將其應用於元素而不是單元vh。

假設我們的 CSS 自定義變量--vh用於此示例。這意味著我們將希望像這樣在我們的 CSS 中應用它：

.my-element { 

  height: 100vh; 

  /* Fallback for browsers that do not support Custom Properties */ 

  height: calc(var(--vh, 1vh) * 100); 

}

<script>

// 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`);

</script>

我們告訴 JavaScript 抓取視口的高度，然後將其向下鑽取到總數的 1/100，這樣我們就有了一個值作為我們的視口高度單位值。然後我們禮貌地要求JS在.--vh:root

結果，我們現在可以--vh像使用任何其他vh單位一樣將其用作高度值，將其乘以 100，我們就得到了我們想要的完整高度。