#yyds干货盘点#css样式vh屏幕高度
发布时间：2022-12-13 06:56:24 249 相关标签： # css# css3# npm
众所周知，在从css3中，vh和wh 指的是浏览器可见区域。
1vw 等于视窗总宽度的1%
1vh 等于视窗总高度的1%
移动端使用vh 遇到的问题
由于，各种浏览器的计算高度不一样，譬如 Safari 浏览器会计算底部或顶部的地址栏。
因此，会出现页面底部元素隐藏不显示的问题。
解决方案
安装 vh-check 插件
在 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>
文章来源： https://blog.51cto.com/u_11365839/5923559
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
