将HTML和BODY选择器的样式设置为高度：100％；与使用100vh

我的兄弟和我早些时候在搞混，他突然大喊：“我学到了新东西！”

我有些震惊，我问，“那是什么？？”

他回答说：“视口高度！我从IE6开始，当时它没有得到完全支持，再也没有真正看过它。” 然后，他向我展示。

我回答说：“我在这里完成了同样的事情。” 并向他展示了另一个我搞砸的沙盒项目。

在我的项目中，在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;
}

两者几乎都做同样的事情。在这里进行了一些研究之后，似乎通常通过前一种方法发布的问题是无法滚动。但是，在我的沙盒项目中，我有更多内容，并且能够正常滚动并与网站互动。

我们俩都无法确定这两种方法之间的区别。这里的任何人都可以教育我们吗？

谢谢！