众所周知,在从css3中,vh和wh 指的是浏览器可见区域。
1vw 等于视窗总宽度的1%
1vh 等于视窗总高度的1%
移动端使用vh 遇到的问题
由于,各种浏览器的计算高度不一样,譬如 Safari 浏览器会计算底部或顶部的地址栏。
因此,会出现页面底部元素隐藏不显示的问题。
![](https://i-blog.csdnimg.cn/blog_migrate/b7f61dc52894ee60578e31486d0cf40a.png)
解决方案
安装 vh-check 插件
npm i vh-check -s
在 main.js 中引入
import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致 vhCheck();
在css样式中使用
<style lang="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>
最后
最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。
有需要的小伙伴,可以点击下方卡片领取,无偿分享