如何在 safari 浏览器中将容器设置为视口高度？

Question

我正在使用 GitHub 页面为我的博客构建静态页面，但在将

container-banner

正确调整到 Safari 浏览器上 iPhone 视口的高度时遇到了麻烦。

参考这个网页，您会注意到横幅内容完全适合页面（因为我的

navbar

和

container-banner

总和为100dvh），并且您可以滚动查看下面的博客内容。我的CSS如下：

.container-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 94dvh;
  padding: 0px 40px;
}

nav,
footer {
  font-size: 1.8rem;
  font-family: "Amatic SC";
  font-weight: bold;
  padding: 0px 40px;
  height: 6dvh;
}

但是，如果您在 safari 浏览器中打开上述页面，则内容会随着向下滚动而调整。我相信这是因为 safari 的导航栏消失了，并且 Flex 内容正在动态调整大小，因为

container-banner

也在根据 dvh 的名称调整大小。

我不喜欢这个用户界面。我希望当页面加载时，它完全适合视口（就像现在一样），并且当您向下滚动时它不会调整内容的大小。我应该更正 CSS 的哪一部分？谢谢你。

Answer 1

这是因为你使用的是“dvh”而不是“vh”。

与“vh”不同，“dvh”表示文档高度的百分比，而不是视口高度。

来自 https://www.w3.org/TR/2021/WD-css-values-4-20211016/#dynamic-viewport-percentage-units

动态视口百分比单位 (dv*) 是根据动态视口大小定义的：动态考虑动态扩展和缩回的任何 UA 界面来调整视口大小。这允许作者调整内容的大小，使其能够完全适合视口，无论是否存在此类界面。