目录

解决在移动端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 */
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
luoganttcc1 小时前
Cesium 加载 本地 b3dm 格式文件 并且 获取鼠标点击处经纬度 (亲测可用)
前端·javascript·3d
云边有个稻草人2 小时前
【Web前端技术】第二节—HTML标签(上)
前端·html·html基本结构标签·html超链接标签·html中的注释和特殊字符·vscode的使用·vscode生成骨架标签
介si啥呀~2 小时前
解决splice改变原数组的BUG(拷贝数据)
java·前端·bug
太阳花ˉ2 小时前
BFC详解
前端
小满zs4 小时前
React-router v7 第五章(路由懒加载)
前端·react.js
Aotman_4 小时前
Vue el-from的el-form-item v-for循环表单如何校验rules(二)
前端·javascript·vue.js
在无清风6 小时前
Java实现Redis
前端·windows·bootstrap
_一条咸鱼_7 小时前
Vue 配置模块深度剖析(十一)
前端·javascript·面试
yechaoa8 小时前
Widget开发实践指南
android·前端
前端切图仔0019 小时前
WebSocket 技术详解
前端·网络·websocket·网络协议