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


theme: smartblue
highlight: androidstudio

众所周知,在从css3中,vh和wh 指的是浏览器可见区域。

1vw 等于视窗总宽度的1%

1vh 等于视窗总高度的1%

移动端使用vh 遇到的问题

由于,各种浏览器的计算高度不一样,譬如 Safari 浏览器会计算底部或顶部的地址栏。

因此,会出现页面底部元素隐藏不显示的问题。

clipboard.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>
© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容