我哥哥和我早先在崇高中乱搞，他突然喊出来，“我学到了新的东西！”
有点震惊，我问道，“那是什么......？”
他回答说，“视口高度！我从I.E.6开始，当它没有完全支持时，再也没有看过它。”然后他继续给我看。
我回答说：“我在这里完成了同样的事情。”并向他展示了另一个我搞砸了的沙箱项目。
在我的项目中，在CSS中，我写了
（编辑：我编辑将背景颜色放在div中，而不是html或正文，我的错误）
（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;
}
两者都做了同样的事情。在这里做了一些研究后，似乎通过前一种方法发出的常见问题是无法滚动;但是，在我的沙箱项目中，我有更多的内容，并能够正常滚动和与网站互动。
我们都没有能够确定两种方法之间的差异。这里的任何人都可以教育我们吗？
谢谢！
答案 0 :(得分：40)
height: 100vh =视口高度的100％
height: 100% =父元素高度的100％
这就是为什么您需要在height: 100%和html上添加body，因为默认情况下它们没有大小
您必须知道的事项：如果您使用％作为垂直边距或填充，则％将在父元素的宽度上计算，而不是高度。
提示：尝试使用vh和vw单位的字体大小:)我喜欢这个（在我知道的某些浏览器中不支持）：font-size: calc(.5vh + .5vw);（例如）
在此处查看CSS单元的精彩页面：http://css-tricks.com/the-lengths-of-css/
答案 1 :(得分：3)
高度：100vh =视口高度的100％
从技术上讲，这是正确的，但是更好的思考方式是=可用高度的100％。
如果您想用可用的高度填充div，这是一个很有用的技巧。在我学到这一点之前，我必须确保从html到嵌套div的每个div的高度都为100％，这可能是乏味且容易出错的。相反，我现在仅在嵌套项目上使用height：100vh。
有关Bootstrap 4.1的example，请参见此gist.run：
答案 2 :(得分：0)
视口单位= vw，vh，vmin和vmax -基于浏览器视口的大小。 因为它们的实际大小取决于视口大小，所以这使它们成为响应式设计的理想单位
注意：在处理宽度时，％单位更合适，但对于高度， vh 单位更好。
视口的宽度实际上将大于html元素的宽度。
视口> html>正文
答案 3 :(得分：0)
还值得注意的是，移动工具栏不包含在视口高度中。显然这是设计使然。 (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 主动计算。