纯JavaScript实现动态设置Div高度失效问题排查

老哥，我看你尝试用纯JavaScript计算视口高度减去header和footer的高度，来动态给内容div设置高度，但功能没生效。咱们先把可能的坑捋一遍，再给你修复后的代码方案。

首先先把你没写完的代码补全，假设你原本的代码是这样的：

function contentHeight(e){ 
  var winH = document.documentElement.clientHeight; 
  var headerH = document.getElementsByClassName('header')[0]; 
  var footerH = document.getElementsByClassName('footer')[0]; 
  var contentHei = winH - headerH.clientHeight - footerH.clientHeight; 
  document.getElementsByClassName('content')[0].style.height = contentHei + 'px'; 
}
// 调用时机
window.onload = contentHeight;
window.onresize = contentHeight;

这种写法容易踩几个坑，导致功能失效：

• DOM元素未加载就执行函数：如果window.onload触发晚，或者你在DOM未就绪时就调用了函数，getElementsByClassName()[0]会返回undefined，调用clientHeight直接报错，后续代码就跑不起来了
• 忘记加单位：如果设置高度时没加'px'，浏览器根本识别不了这个数值
• 元素获取失败：类名写错、元素不存在，都会导致计算出的高度是NaN或者无效值
• 高度计算不准确：clientHeight只包含元素的padding和内容高度，不包含border，如果你的header/footer有边框，那实际占据的高度会比计算值大，导致内容区被截断

给你整理了修复后的代码，加了错误处理和兼容性优化：

function contentHeight() {
  // 用querySelector获取元素，更简洁，还能避免类名选择器的一些坑
  const header = document.querySelector('.header');
  const footer = document.querySelector('.footer');
  const content = document.querySelector('.content');

  // 先检查元素是否存在，避免报错中断代码
  if (!header || !footer || !content) {
    console.warn('页面缺少header、footer或content元素，请检查DOM结构');
    return;
  }

  // 兼容多浏览器的视口高度获取
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 用offsetHeight获取元素实际占据的高度（包含border、padding、内容）
  const headerHeight = header.offsetHeight;
  const footerHeight = footer.offsetHeight;
  
  // 计算内容区高度
  const contentHeight = viewportHeight - headerHeight - footerHeight;
  
  // 设置高度，记得加px单位，用模板字符串更直观
  content.style.height = `${contentHeight}px`;
  // 可选：如果内容可能超出，自动显示滚动条
  content.style.overflowY = 'auto';
}

// 确保DOM完全加载后再执行，比window.onload更早触发
document.addEventListener('DOMContentLoaded', contentHeight);
// 窗口大小变化时重新计算，加个防抖避免频繁触发
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    requestAnimationFrame(contentHeight);
  }, 250);
});

再给你提几个额外的注意点：

• 如果你的header或footer是position: fixed或position: sticky，它们不会占据文档流空间，这时候不需要用视口高度减去它们的高度，而是给内容区设置padding-top和padding-bottom等于header/footer的高度
• 如果页面出现滚动条，window.innerHeight会包含滚动条的高度，如果你需要更精确的视口高度，可以用document.documentElement.clientHeight（不包含滚动条）
• 防抖函数里的250ms可以根据需求调整，数值越小响应越快，数值越大性能越好

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