Safari 的 100vh 问题

Safari在计算视口高度时，是包含了工具栏的高度的，这样一来，100vh的内容高度就会超出显示区域。

方案一：使用 -webkit-fill-available

在铺满视口的容器上设置以下css属性

.container{
    height: -webkit-fill-available;
}

-webkit-fill-available 是一个 Webkit 前缀的 CSS 属性值，用于设置元素的尺寸，以填充其包含块的可用空间。
这个属性通常用于指定元素的高度或宽度，以便它填充其父元素的可用空间，而不会超出或溢出。

当工具栏隐藏时，页面底部会有一段空白区域，需要加上视口的安全区域的判断

<meta name="viewport" content="... viewport-fit=cover">
<style>
    .container{
        height: -webkit-fill-available;
        padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
        padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    }
</style>

Tips：Chrome 84 起已不再支持 -webkit-fill-available ，这时利用 @support 与 -webkit-touch-callout 只针对 safari 设置

@supports (-webkit-touch-callout: none) {
    .container
      height: -webkit-fill-available;
    }
}

另外，height: -webkit-fill-available; 是一种特殊的设置，它告诉浏览器将元素的高度设置为其包含块的可用空间的高度。因此，如果设置了这个值，其他对高度的设置可能会被覆盖或不生效，因为浏览器会优先考虑 -webkit-fill-available 的设置。

.container{
    height: -webkit-fill-available;
    height：90vh; // 此高度将不会生效!!!
}

方案二：JS + CSS

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

执行appHeigh函数，根据当前屏幕可视区域高度设置css变量 --app-height
通过 var(--app-height) 获取js修改变量的值

本文链接：