解决safari浏览器 100vh 问题

解决safari浏览器 100vh 问题

通过 CSS 变量计算 1vh 所表示的实际高度

设置一个 CSS 变量（比如 --vh），然后通过 JavaScript 脚本动态设置 --vh 的值，然后使用时需兼容处理即可（比如，height: 100vh; height: calc(var(–vh) * 100)）。

<style>
  :root {
    --vh: 1vh;
  }
</style>

<script>
  !(function (n, e) {
    function setViewHeight() {
      var windowVH = e.innerHeight / 100
      n.documentElement.style.setProperty('--vh', windowVH + 'px')
    }
    var i = 'orientationchange' in window ? 'orientationchange' : 'resize'
    n.addEventListener('DOMContentLoaded', setViewHeight)
    e.addEventListener(i, setViewHeight)
  })(document, window)
</script>

.page {
  height: calc(100vh - 50px);
  height: calc(var(--vh) * 100 - 50px);
}

原文链接