手机端电脑浏览器100vh相对高度不一致 vhCheck -

大家都知道，再从css3中，vh和wh 是指电脑浏览器由此可见地区。

1vw 相当于窗口总长度的1%

1vh 相当于窗口总极高的1%

手机端应用vh 遇到的困难

因为，各种浏览器的计算高度不一样，例如 Safari 电脑浏览器会测算底端或上方的搜索框。

因而，会有网页页面底端原素掩藏无法显示问题。

解决方法

组装 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>

www.adminjs.CN前端开发