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不会使内容变大，因此高度将是内容的高度，直到最大高度。

最后，尽量不要设置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;
}

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

1 个答案: