将HTML和正文选择器样式设置为高度: 100%；与使用100vh相比
早些时候，我和我的兄弟在sublime里胡闹，他突然大叫：“我学到了新东西！”
我有点震惊，问道：“那是什么.”
他回答说："Viewport height！我在I.E.6中开始的时候，它还没有完全被支持，并且再也没有真正地看过它。“然后他继续向我展示。
我回答说：“我在这里也做了同样的事情。”给他看了我搞的另一个沙盒项目。
在我的项目中，在CSS中，我写道
(编辑:我将背景颜色放在div中，而不是html或body，这是我的错误)
(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/ )
html, body {
height: 100%;
}
div {
height: 100%;
background: green;
}他的代码是(jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/ )
div {
height: 100vh;
background: green;
}两者实际上做了同样的事情。在这里做了一些研究后，似乎通过前一种方法经常遇到的问题是无法滚动；然而，在我的沙箱项目中，我有更多的内容，并且能够正常滚动和与网站交互。
我们都不能确定两种方法之间的区别。在座的各位能教我们吗？
谢谢!
回答 2
Stack Overflow用户
发布于 2021-08-11 22:10:23
还值得注意的是，移动工具栏不包括在视口高度中。显然这是设计好的。(CSS3 100vh not constant in mobile browser)这使得vh和vw在移动设备上的使用变得令人沮丧。最糟糕的是当你的模式的X按钮被一个移动工具栏覆盖。
你可以在vw中遇到类似的滚动条和正文边距/填充问题。(Difference between Width:100% and width:100vw?)
如果需要一些东西来占据整个视区高度，可以考虑使用height:100% (并确保在html和body标记上都设置了height:100% )。然而，如上所述，如果您最终需要在一个很长的嵌套元素链上指定height:100%，这将是一个巨大的痛苦。
如果您没有太多的嵌套元素，那么使用height:100%似乎是个不错的选择。另外，由于有很多嵌套元素，vh省去了您的麻烦。
如果移动工具栏仍然是一个相关的问题，那么您可能需要积极地使用window.innerHeight进行计算。
Stack Overflow用户
发布于 2021-10-13 12:27:47
这也很有趣：
在这里，蓝色代表<body>，红色代表<html>。如果您使用100vh，然后调整浏览器的大小，使内容不完全可见-您将获得滚动条。当您滚动时，100vh的<body>将停留在上方，您将看到<html>的红色部分。
当使用100%时，你得到的<body>总是覆盖着<html>。
https://stackoverflow.com/questions/27612931
复制相似问题