众所周知,在从css3中,vh和wh指的是浏览器可见区域。
1vw等于视窗总宽度的1%
1vh等于视窗总高度的1%
移动端使用vh遇到的问题由于,各种浏览器的计算高度不一样,譬如Safari浏览器会计算底部或顶部的地址栏。
因此,会出现页面底部元素隐藏不显示的问题。
解决方案安装vh-check插件
npmivh-check-s
在main.js中引入
importvhCheckfrom"vh-check";//移动端浏览器100vh高度不一致vhCheck();
在css样式中使用
<stylelang="scss">//浏览器URL栏显示的情况下元素都出现了错位//JS执行过一次初始化vhCheck()后,就可以直接用CSS变量--vh-offset修正100vh了$vh:calc(100vh-var(--vh-offset,0px));.form-content-box{overflow:auto;//适配前height:100vh;//适配后height:$vh;}.form-box{//适配前height:calc(100vh-45px);//适配后height:calc(#{$vh}-45px);}</style>