在样式表中设置一个根CSS变量，如下所示：

// CSS vars
:root {
    --real100vh: 100vh;
}

然后在JavaScript中，在加载（或jQuery ready事件）和调整大小时，您需要运行以下代码：

set100vhVar() {
        // If less than most tablets, set CSS var to window height.
        let value = "100vh"

        // If window size is iPad or smaller, then use JS to set screen height.
        if (window.innerWidth && window.innerWidth <= 1024) {
            value = `${window.innerHeight}px`
        }
        document.documentElement.style.setProperty("--real100vh", value)
    }

现在您可以简单地使用CSS：height: var(--real100vh);无论你想让100vh实际上是移动上真正的100vh，这将简单地工作！
如果你在同一个元素上添加一个transition: height 0.4s ease-in-out;，看起来会更好，这样当你在移动设备上向下滚动时，它就不会折断。
使用CSS var的好处是你可以在任何时候覆盖它，例如你可能希望某些断点是height: 500px，如果你使用内联样式，这很难做到。你也可以在calc()中使用它，比如height: calc(var(real100vh) - 100px);，它对于固定的头文件很有用。
如果您使用Vue/Nuxt，请查看how we have implemented that here。

根据needed browser support，相对视口单位的最新迭代，例如dvh（动态视口高度）也可能是一个选项。
当您想要视见区自动调整大小以回应动态展开或缩回的浏览器界面时，可以使用动态视见区大小。动态视见区大小可让您设计的内容完全符合视见区大小，而不论是否存在动态浏览器界面。

CSS网格是解决方案。

.grid-container {
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 30px 1fr 30px
}