如何用JavaScript获取div高度并为另一div设置calc(100vh - 该高度)样式

问题原因 #

你的代码无法运行主要有两个问题：

• 字符串与数字的运算错误：'100vh' - offsetHeight 会将字符串和数字做减法运算，结果是NaN，无法作为有效的CSS值
• 缺少单位：offsetHeight返回的是纯数字的像素值，需要加上px单位才能和100vh进行calc计算

修正后的代码 #

// 获取header的动态高度
const header = document.getElementById('header');
const headerHeight = header.offsetHeight;
// 为banner设置计算后的高度
const banner = document.getElementById('banner');
banner.style.height = `calc(100vh - ${headerHeight}px)`;

优化方案（支持窗口 resize 动态更新） #

如果header高度会随窗口大小变化，或者页面有响应式需求，可以监听窗口resize事件实时更新高度：

function updateBannerHeight() {
  const header = document.getElementById('header');
  const headerHeight = header.offsetHeight;
  const banner = document.getElementById('banner');
  banner.style.height = `calc(100vh - ${headerHeight}px)`;
}

// 页面加载时初始化
updateBannerHeight();
// 窗口大小改变时重新计算
window.addEventListener('resize', updateBannerHeight);

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