width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
这个 CSS 应该给我视口的确切 (100%) 尺寸。但它显然太大了，因为它会导致页面溢出。
它不是填充、边距或轮廓，因为我删除了所有这些。
note 当我添加两个具有这些尺寸的 div 时，它似乎也只会“增长”大于投影尺寸。 （但在 jsfiddle 中总是如此）
我应该将其视为一个错误并编写一个解决方法吗？还是我错过了什么？
【问题讨论】：
overflow:hidden 添加到父元素（在本例中为<body> 标签）应该可以解决这个问题，这样您就可以保持其余部分不变。
标签： html css viewport-units
视口测量准确。问题在于您的 div 是一个内联块。浏览器在行框中呈现您的 inline-block 元素。 div 下方的空白来自此行框的基线；这是印刷下降应该去的区域。这个额外的空间，加上你的 div，就是导致溢出的原因。
如果您删除 display: inline-block 声明以使您的 div 呈现为块级元素，则滚动条将消失，并且 div 将完全适合视口。
如果您出于某种原因需要将此元素作为内联块，设置 vertical-align: top（或 bottom 或 middle）似乎可以解决它。
【讨论】：
display: block 并消失。如果您需要它是 inline-block 并且字母间距为零，那么您需要在父级上将 font-size 设置为 0。您很可能希望将其重新设置为每个孩子都可以阅读的内容。
还有其他方法可以解决这个问题
你应该在vh中设置所有body的line-height
【讨论】：