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

夏日米米茶2024-08-21 15:11

原文引用：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 */