VW 和 VH 单位不准确
VW and VH units are not accurate
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
这个 CSS 应该给我准确的(100%)视口尺寸。但它显然太大了,因为它会导致页面溢出。
它不是填充、边距或轮廓,因为我删除了所有这些。
注意 当我添加两个具有这些尺寸的 div 时,它似乎也只比投影尺寸大 "grows"。 (但在jsfiddle中总是如此)
我是否应该将其视为一个错误并编写解决方法?还是我遗漏了什么?
视口测量准确。问题在于您的 div 是一个内联块。浏览器在行框上呈现您的内联块元素。你的div下面的白色space来自这个line box的基线;这是印刷下降应该去的地方。这个额外的 space 与您的 div 相结合导致溢出。
如果删除 display: inline-block
声明以便将 div 呈现为块级元素,则滚动条将消失并且 div 将完全适合视口。
如果您出于某种原因需要将此元素作为内联块,设置 vertical-align: top
(或 bottom
或 middle
)似乎可以解决问题。
还有另一种方法可以解决这个问题
你应该在vh
中设置所有body的line-height
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
这个 CSS 应该给我准确的(100%)视口尺寸。但它显然太大了,因为它会导致页面溢出。
它不是填充、边距或轮廓,因为我删除了所有这些。
注意 当我添加两个具有这些尺寸的 div 时,它似乎也只比投影尺寸大 "grows"。 (但在jsfiddle中总是如此)
我是否应该将其视为一个错误并编写解决方法?还是我遗漏了什么?
视口测量准确。问题在于您的 div 是一个内联块。浏览器在行框上呈现您的内联块元素。你的div下面的白色space来自这个line box的基线;这是印刷下降应该去的地方。这个额外的 space 与您的 div 相结合导致溢出。
如果删除 display: inline-block
声明以便将 div 呈现为块级元素,则滚动条将消失并且 div 将完全适合视口。
如果您出于某种原因需要将此元素作为内联块,设置 vertical-align: top
(或 bottom
或 middle
)似乎可以解决问题。
还有另一种方法可以解决这个问题
你应该在vh
line-height