Header固定且高度未知时，让Content填充剩余屏幕空间的实现方案

针对你遇到的position:fixed Header脱离文档流、Header/Footer高度未知的问题，下面给出两种可行方案：

方案1：JavaScript动态计算（全浏览器兼容） #

这是最稳妥的方案，能适配所有浏览器场景：

HTML结构 #

<header class="site-header">
  <!-- Header内容，高度由内容自动撑开 -->
  自适应高度的Header区域
</header>
<main class="site-content">
  <!-- 需要填充剩余屏幕空间的内容区域 -->
  填充剩余空间的Content
</main>
<footer class="site-footer">
  <!-- Footer内容，高度由内容自动撑开 -->
  自适应高度的Footer区域
</footer>

基础CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
}

.site-footer {
  background-color: #e5e5e5;
}

.site-content {
  /* 先预留Header的空间，避免内容被遮挡 */
  margin-top: var(--header-height);
  /* 初始最小高度占满视口，后续JS会修正 */
  min-height: calc(100vh - var(--header-height));
}

动态计算逻辑 #

function setContentHeight() {
  const header = document.querySelector('.site-header');
  const footer = document.querySelector('.site-footer');
  const content = document.querySelector('.site-content');

  const headerHeight = header.offsetHeight;
  const footerHeight = footer.offsetHeight;

  // 设置全局CSS变量，同步Header高度
  document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
  // 计算Content的最小高度：视口高度 - Header高度 - Footer高度
  content.style.minHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
}

// 页面加载完成后计算一次
window.addEventListener('load', setContentHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', setContentHeight);
// 如果Header/Footer内容动态变更（比如展开折叠），手动调用setContentHeight()

方案2：CSS Grid配合少量JS（现代浏览器适用） #

如果不需要兼容IE11及以下浏览器，可以用Grid布局简化实现，但仍需少量JS处理fixed Header的空间预留：

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
}

.site-content {
  margin-top: var(--header-height);
}

.site-footer {
  background-color: #e5e5e5;
}

配套JS #

只需要获取Header高度并设置CSS变量即可，逻辑参考方案1中设置--header-height的部分——Grid会自动让Content占满中间的1fr空间，再减去Footer的高度。

核心注意事项 #

• 由于Header是position:fixed，必须给Content设置margin-top来避免内容被遮挡，这个值必须和Header实际高度一致
• 当Header或Footer的内容动态变化时（比如加载新内容、展开菜单），必须重新调用高度计算函数
• 方案1兼容性覆盖所有浏览器，方案2更简洁但依赖现代浏览器对CSS Grid的支持

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