css style vh screen height, pit guide

As we all know, in CSS3, vh and wh refer to the visible area of ​​the browser.

1vw is equal to 1% of the total width of the window

1vh is equal to 1% of the total height of the window

Problems encountered when using vh on the mobile terminal

Because the calculation height of various browsers is different, for example, the Safari browser will calculate the bottom or top address bar.

Therefore, there will be a problem that the elements at the bottom of the page are hidden and not displayed.

solution

Install the vh-check plugin

npm i vh-check -s
复制代码

Introduced in main.js

import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致 vhCheck();
复制代码

In css style use

<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>
复制代码