html页面刷新滚动条高度为0,为什么css设置页面高度100vh会出现滚动条

如下，预期效果满屏都是红色，没有滚动条。

.div{

height: 100vh;

backgroud:red;

}

实际效果是会有滚动条，因为body 有默认的 8px 的margin，清掉就好了

body{margin:0;}

.div{

height: 100vh;

backgroud:red;

}

这也只是在部分情况下奏效，在有些设备上还是有问题的。比如移动端 ios的safari浏览器或者android端手机浏览器(有工具栏的)依然有此问题。

那么在移动端的浏览器里面为啥会产生此问题呢？

答案是：浏览器下方的工具栏的高度导致的

浏览器的工具栏是不包括在100vh里面的，所以整体可视高度就是100vh+工具栏高度，如果要使用100vh的方式，需要减去工具栏高度：height:calc(100vh - 工具栏高度)，这样整体可视高度就是100vh了。

解决方法1：直接设置html,body,div 每一级的设置高度为：100% 在浏览器中就不会计算其工具栏的高度值。

body{margin:0;}

html,body,.div{

height:100%

}

.div{

backgroud:red;

}