当前位置:

css样式vh屏幕高度,踩坑指南

访客 2024-04-23 1383 0

众所周知,在从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>

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~