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

Question

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

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

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

在IE浏览器和Firefox上的Windows7上是可以的，但在Chrome(最新版本-70.0.3538.102(上，该网站需要的不仅仅是全屏，我可以向下滚动一点。这在Ubuntu上很糟糕——在Chromium和Firefox上，大约30%的网站是不可见的(这款笔记本电脑的分辨率较小(。

有没有更好的方法来实现"不滚动"和100%高度的目标？我试过最大身高：100%和！重要的属性，但这无济于事。

Answer 1

如果您没有设置overflow属性，内容将迫使任何东西变得更大。相反，设置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;
}