[CSS] 解決 ios safari 100vh 的問題

因為 safari 計算的方式與其他瀏覽器不同，當容器高度設置為 100vh 時，工具列也被算進 100vh 中， 導致底部內容被遮住。

image by Max Schmitt

解決方法

1. JS + CSS

監聽頁面的resize 事件，獲取頁面的innerHeight，動態設置高度。

<!-- JS  -->
const heightVH = () => {
  // 抓取可視視窗高度 算出目前1vh的值
  const vh = window.innerHeight * 0.01;
  // 自訂 --vh 變數，套用剛算出的vh
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};
 // 監聽頁面的 resize 事件
window.addEventListener('resize', () => {
  heightVH();
});
window.addEventListener("DOMContentLoaded", heightVH);

CSS 使用方式
vh單位 以”var( — vh, 1vh)”替代
100vh，請改寫為”calc(var( — vh, 1vh) * 100)”

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

2. CSS

height: 100vh;
max-height: -webkit-fill-available;