踩坑记录，移动端开发使用height=100vh

记录一次踩坑经验，因为项目需求，在重置样式的时候没有给body设置height：100%，而是设置了min-height:100%,导致在开发中给页面设置高度的时候设置height:100%;是没有任何效果的，所以使用了height:100vh,因为1vh单位代表了屏幕可视区域的1%，在开发中浏览器预览并没有任何问题。
然而，实际发了测试包，在苹果手机上测试的时候出现了问题，本来应该定位在屏幕底部的一个元素距离实际屏幕底部有了一定的距离，并且出现了滚动条

为什么

就是因为在高度上各手机的浏览器存在一定的差异，有的手机存在隐藏的地址栏和默认的底部按钮栏，导致实际的100vh其实并不是手机的视窗大小，这导致了本该置底的元素距离底部有一定距离，实际情况如下图

结局办法

使用js动态改变盒子高度，即使用window.innerHeight来获取实际的屏幕高度，然后赋值给需要改变的元素
即xxxx.style.height = window.innerHeight +'px’