解决在移动端css使用100vh底部被遮盖的问题

原文引用:https://blog.csdn.net/hw_happy/article/details/132421653

移动端下,若使用100vh单位,那么高度不会是浏览器可视区域的高度,而是会高于可视区域,所以居底部的元素会被遮盖住:

如果是chrome浏览器移动端APP的版本在127以上,则可以直接使用 dvh 代替 vh 单位。

如果127版本以下,那么就需要手动兼容了。

第一步,写js代码,计算出1vh的高度。

javascript 复制代码
//首先我们获得视口高度并将其乘以1%以获得1vh单位的值
let vh = window.innerHeight * 0.01
// 然后,我们将------vh自定义属性中的值设置为文档的根
document.documentElement.style.setProperty('--vh', `${vh}px`)
// 监听resize事件 视图大小发生变化就重新计算1vh的值
window.addEventListener('resize', () => {
  // 我们执行与前面相同的脚本
  let vh = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh}px`)
})

第二步,写css样式,使用变量var。

css 复制代码
.container {
  height: 100vh; /* 对于不支持自定义属性的浏览器的回退 */
  height: calc(var(--vh, 1vh) * 100); /* 需要多少vh就乘多少值,100vh就乘100 */
相关推荐
excel5 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着5 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
会豪9 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子9 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶9 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子9 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23339 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js