隐藏Header后如何让Main元素自动适配高度？

方案1：用Flexbox自动分配空间（最优解） #

彻底放弃固定vh的手动计算，给容器用Flex布局让浏览器自动分配剩余空间：

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
#wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#Header1 { height: 10vh; }
#Header2 { height: 4vh; }
#Main { flex: 1; /* 自动填满wrapper的剩余垂直空间 */ }
/* Footer如果有固定高度就直接写，比如 */
#Footer { height: 4vh; }

之后你只需要用JS控制Header1/Header2的display: none/block，Main的高度会自动拉伸或收缩，完全不用额外写JS修改高度。

方案2：JS动态计算高度 #

如果一定要用手动计算的方式，你的错误写法是把initial和数值拼接，这是无效的CSS值。正确做法是计算当前页面的可用空间：

function updateMainHeight() {
  const header1 = document.querySelector('#Header1');
  const header2 = document.querySelector('#Header2');
  const footer = document.querySelector('#Footer');
  
  // 获取当前显示的头部总高度（offsetHeight是元素实际渲染的像素高度）
  const usedHeaderHeight = (header1.offsetHeight || 0) + (header2.offsetHeight || 0);
  const usedFooterHeight = footer.offsetHeight || 0;
  
  // 计算Main需要的高度：视口总高度减去已用高度
  const mainHeight = window.innerHeight - usedHeaderHeight - usedFooterHeight;
  document.querySelector('#Main').style.height = `${mainHeight}px`;
}

// 调用时机：页面初始化时、头部显示/隐藏切换后
updateMainHeight();
// 比如隐藏Header1后调用：
document.querySelector('#Header1').style.display = 'none';
updateMainHeight();

// 加上窗口大小变化监听，防止窗口缩放后高度错乱
window.addEventListener('resize', updateMainHeight);

方案3：CSS变量+calc动态计算 #

用CSS变量存储头部高度，通过JS修改变量值，让CSS自动计算Main高度：

:root {
  --header1-height: 10vh;
  --header2-height: 4vh;
  --footer-height: 4vh;
}
#Main {
  height: calc(100vh - var(--header1-height) - var(--header2-height) - var(--footer-height));
}

JS控制变量：

// 隐藏Header1时，将对应变量设为0
document.documentElement.style.setProperty('--header1-height', '0');
// 显示时恢复原高度
document.documentElement.style.setProperty('--header1-height', '10vh');
// Header2同理操作

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