将HTML和BODY选择器设置为height：100％; vs使用100vh

概述我哥哥早点搞砸了,他突然大叫,“我学到了新的东西！” 有点震惊,我问：“那是什么？ 他回答说：“视口高度！我开始在I.E.6,当它不完全支持,从来没有真正再次看到它.然后他开始向我展示. 我回答说：“我在这里完成了同样的事情.”并向他展示了另一个沙箱项目. 在我的项目中,我在CSS中写道 (编辑：我编辑把背景颜色放在div中,不是html或body,我的错误) (jsfiddle http://j 我哥哥早点搞砸了,他突然大叫,“我学到了新的东西！”

有点震惊,我问：“那是什么？

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

两者都是同样的事情.在这里进行一些研究之后,看起来好像通过前一种方法发行的方法是无法滚动;然而,在我的沙箱项目中,我有更多的内容,并且能够正常滚动并与网站进行交互.

我们都没有能够确定两种方法之间的区别.这里的任何人都能够教育我们吗？

谢谢！

解决方法 height：100vh =视口高度的100％

height：100％=父元素高度的100％

这就是为什么你需要在HTML和body上添加高度：100％,因为默认情况下没有大小

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

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

在这里看到一个很好的页面CSS单位：http://css-tricks.com/the-lengths-of-css/

总结

以上是内存溢出为你收集整理的将HTML和BODY选择器设置为height：100％; vs使用100vh全部内容，希望文章能够帮你解决将HTML和BODY选择器设置为height：100％; vs使用100vh所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。