如何让HTML元素高度与window.innerHeight的取值保持相等

解决方案 #

方案1：CSS原生单位实现（首推，无需JS） #

直接使用视口高度单位vh，1vh等价于当前视口高度的1%，因此100vh刚好和window.innerHeight的值相等，天然支持视口变化时自动适配，且不需要依赖父元素高度，完全符合你不能用height: 100%的场景：

目标元素选择器 {
  width: 100%;
  height: 100vh;
  /* 若元素有内边距、边框，需加以下属性避免高度溢出 */
  box-sizing: border-box;
}

如果是移动端需要兼容地址栏展开/收起的动态高度，可以用现代浏览器支持的100dvh代替100vh，适配效果更精准。

方案2：JS动态监听实现（特殊场景兼容用） #

如果存在vh单位不兼容的特殊场景，可以通过监听视口变化事件动态更新元素高度：

// 获取目标元素
const targetEl = document.querySelector('你的元素选择器')
// 防抖函数，避免resize高频触发导致性能问题
function debounce(func, delay = 100) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}
// 设置元素高度的方法
function setElHeight() {
  targetEl.style.height = `${window.innerHeight}px`
}
// 页面加载完成后初始化高度
window.addEventListener('load', setElHeight)
// 监听视口尺寸变化，更新高度
window.addEventListener('resize', debounce(setElHeight))

注意：如果不需要防抖可以直接传入setElHeight，防抖阈值可根据实际需求调整。

内容的提问来源于stack exchange，提问作者mrdenizlp