解决在移动端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 */
相关推荐
pepedd8641 分钟前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界3 分钟前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript
跟橙姐学代码4 分钟前
学Python别死记硬背,这份“编程生活化笔记”让你少走三年弯路
前端·python
前端缘梦4 分钟前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试
Fantastic_sj4 分钟前
React 19 核心特性
前端·react.js·前端框架
VaJoy5 分钟前
Cocos Creator Shader 入门 ⒂ —— 自定义后处理管线
前端·cocos creator
小高0076 分钟前
📌React 路由超详解(2025 版):从 0 到 1 再到 100,一篇彻底吃透
前端·javascript·react.js
Data_Adventure10 分钟前
Java 与 TypeScript 的“同名方法”之争:重载机制大起底
前端·typescript
summer77712 分钟前
GIS三维可视化-Cesium
前端·javascript·数据可视化
HWL567916 分钟前
pnpm(Performant npm)的安装
前端·vue.js·npm·node.js