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

2018-07-02 01:40:29

我的兄弟和我在早些时候在崇高的环境中混战，他突然大喊：“我学到了一些新东西！”

有一点震惊，我问道：“那是什么...？”

他回答说：“视口高度！我从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;
}

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

我们都不能确定两种方法之间的差异。这里有人能够教育我们吗？

谢谢！

height: 100vh =视口高度的100％

height: 100% =父母元素高度的100％

这就是为什么你需要在html和body上添加height: 100% ，因为它们默认没有大小

一些你必须知道的：如果你使用％作为垂直边距或填充，％将根据父元素的宽度计算，而不是高度。

提示：尝试使用字体大小的vh和vw单位:)我喜欢这个（我知道在某些浏览器中不支持）： font-size: calc(.5vh + .5vw); （例如）

在这里查看CSS单元的好页面：http://css-tricks.com/the-lengths-of-css/

链接地址: http://www.djcxy.com/p/89401.html