js监听视口大小变化，动态调整vh高度

最新推荐文章于 2025-05-19 19:40:06 发布

Abao

最新推荐文章于 2025-05-19 19:40:06 发布

阅读量269

点赞数 3

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_72439307/article/details/141277492

版权

<div id="dynamicHeight" class="dynamic-height">这是一个动态高度的元素。</div>

:root {  
  --vh: 1vh; /* 初始值，之后会被JavaScript修改 */  
}  
  
.dynamic-height {  
  height: calc(var(--vh) * 100); /* 假设我们想要元素的高度是视口高度的100% */  
}

function updateVh() {  
  const vh = window.innerHeight * 0.01; // 计算1vh等于多少px  
  document.documentElement.style.setProperty('--vh', `${vh}px`); // 更新CSS变量  
}  
  
// 初始设置  
updateVh();  
  
// 监听窗口大小变化  
window.addEventListener('resize', updateVh);