我哥哥早点搞砸了,他突然大叫,“我学到了新的东西!”
有点震惊,我问:“那是什么?
他回答说:“视口高度!我开始在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/