解决在移动端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 */
相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休6 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪6 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do6 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——6 小时前
前端登录鉴权详解
前端·javascript
李姆斯6 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理