css单位vh，100vh 为什么会出现滚动条

Question

<div class = "div"></div>
.div{
    height: 100vh;
}


页面垂直方向出现了一小段滚动条，不是说 vh 参照的是window.innerHeight吗？为什么还会出现滚动条？？

Answer 1

你好，你的body的margin值没有清零

body{margin:0;}

Answer 2

vh确实是相对于屏幕的，但默认body有一个margin，100%加上这个margin就超出了。清除body的margin即可。

Answer 3

body 有默认的 8px 的margin，清掉就好了。

body {
    margin: 0;
}