大众和VH单位不准确

时间:2015-04-26 17:55:37

标签: html css viewport-units

width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/

这个CSS应该给我视口的确切(100%)尺寸。但它显然太大了,因为它导致页面溢出。

它不是填充,边距或轮廓,因为我删除了所有这些。

note 当我添加两个具有这些尺寸的div时,它似乎只比投影尺寸“增长”更大。 (但在jsfiddle中总是如此)

http://jsfiddle.net/0psu7ys6/

我应该把它视为一个bug并编写一个解决方案吗?或者我错过了什么?

2 个答案:

答案 0 :(得分:9)

视口测量结果准确无误。问题在于你的div是一个内联块。浏览器在行框上呈现您的内联块元素。 div下方的空白来自此行框的基线;这是印刷下降者应该去的地方。这个额外的空间与你的div结合,是导致溢出的原因。

如果删除display: inline-block声明,以便将div渲染为块级元素,则滚动条将消失,div将完全适合视口。

如果由于某种原因需要将此元素作为内嵌块,设置vertical-align: top(或bottommiddle)似乎可以解决此问题。

答案 1 :(得分:0)

还有另一种解决方法

您应该在line-height中设置所有正文的vh