width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
这个CSS应该给我视口的精确(100%)尺寸。但是它显然太大了，因为它导致页面溢出。
这不是填充、边距或轮廓，因为我已经全部删除了。
注意 当我添加两个具有这些尺寸的div时，它似乎只会比预期的尺寸"增长"得更大。(但在jsfiddle中这总是发生)
我应该认为这只是一个bug并写一个解决方法吗？还是我少了什么？
VW和VH单位不准确。
12
- Andrew
1
2个回答
11
视口测量值是准确的。 问题在于您的div是内联块。 浏览器将您的内联块元素呈现在一个行框上。 您的div下面的空白来自该行框的基线; 它是排版下降者应该放置的区域。 这个额外的空间，加上您的div，导致了溢出。
如果您删除display: inline-block声明，使您的div呈现为块级元素，则滚动条将消失，div将完全适合视口。
如果您需要此元素作为内联块，请设置vertical-align：top（或bottom或middle），似乎可以解决它。
- BoltClock
8
将其更改为
display: block，它就会消失。如果您需要它成为 inline-block 并且字母间距为零，则需要在父元素上设置字体大小为 0。您很可能希望在每个子元素中将其设置回可读的某些值。 - powerbuoy@Lemony-Andrew：这是因为您现在有两个高度等于视口高度的元素，总共占用了视口高度的200%。 - BoltClock
1@Lemony-Andrew：哦，那是因为垂直滚动条的缘故。滚动条的存在不会影响vw/vh的计算，所以你最终会在两个方向上都出现溢出。 - BoltClock
@BoltClock 好的，谢谢。我想我会使用百分比，因为这似乎不那么容易出错。 - Andrew
@Lemony-Andrew：是的——百分比测量将调整滚动条。视口测量不会。 - BoltClock
显示剩余3条评论
0
解决这个问题还有另一种方法
你应该将所有body的line-height设置为vh
- Mohamed hesham
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
overflow:hidden添加到父元素（在本例中为<body>标签）应该解决它，这样您就可以保留所有其他内容。 - ed1nh0