html - 不同浏览器和操作系统的 CSS 100vh 属性不一致

Question

我正在制作 patatap.com用于学习目的的网站克隆。我希望网站正好占据可用屏幕高度的 100%。没有更多内容，因此不需要滚动。我为此使用 100vh CSS 属性:

body, html {
    max-height: 100vh;
    margin: 0;
}

这是网站的当前版本: http://patatap-clone.hexagonwebdev.vxm.pl/ (按键盘上的任意字母或数字即可使用其功能)。

在 Windows 7 上的 Internet Explorer 和 Firefox 上没问题，但在 Chrome(最新版本 - 70.0.3538.102)上，该网站需要全屏显示，我可以向下滚动一点。 这在 Ubuntu 上很糟糕——在 Chromium 和 Firefox 上，大约 30% 的网站是不可见的(这台笔记本电脑的分辨率较小)。

是否有更好的方法来实现“非滚动”和 100% 高度目标？我已经尝试过 max-height: 100% 和 !important 属性，但这没有帮助。

Answer 1

如果您没有设置overflow 属性，内容将强制任何东西变大。相反，设置 max-height 不会使内容变大，因此高度将是内容高度到 max-height。

最后，body/html标签尽量不要设置高度。这些是“特殊”标签，其功能与其他元素不同。

相反，创建一个全屏幕大小的容器。

/* normal div */
.container {
  display:block;
  height: 100vh;
  overflow:hidden;
  background: black;
}

/* or absolutely positioned div */
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow:hidden;
  background: black;
}