如何实现动态高度固定可见header 搭配下方可滚动内容块？

方案一：纯CSS Flex布局（推荐，无JS依赖） #

这是最优解，无需修改现有HTML结构，仅调整CSS即可同时解决动态header适配、滚动条仅出现在内容区两个问题：

/* 先重置所有外层容器样式，确保占满整个视口高度 */
html, body, .root, .app {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 禁用全局滚动，滚动行为仅交给内容区 */
}

.app {
  display: flex;
  flex-direction: column;
}

.fixedHeader {
  flex-shrink: 0; /* 禁止header被压缩，高度完全由内部内容决定，自动适配动态内容 */
  z-index: 1;
  /* 原有的position: fixed、width:100%可以直接删除，flex布局下自动占满顶部宽度 */
}

.scrollableContentBelowFixedHeader {
  flex-grow: 1; /* 自动占满header之外的所有剩余视口高度 */
  overflow-y: auto; /* 内容超出时仅该区域出现滚动条，不会覆盖header */
  /* 原有的固定padding-top可以直接删除，无需手动计算偏移 */
}

方案优势 #

• 完全适配动态高度header：无论header内部内容怎么变化，高度都会自动撑开，下方内容区自动调整位置，不需要手动计算偏移值
• 滚动条仅出现在可滚动内容区旁，符合体验要求
• 纯CSS实现，无JS开销，性能最优

方案二：Fixed定位+动态高度监听（兼容原有fixed逻辑场景） #

如果业务逻辑必须保留header的fixed定位，可以用CSS变量加ResizeObserver动态更新偏移值：

:root {
  --header-height: 9.75rem; /* 初始默认高度 */
}
.fixedHeader {
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
.scrollableContentBelowFixedHeader {
  padding-top: var(--header-height); /* 用CSS变量代替固定值 */
}

添加少量JS监听header高度变化，动态更新CSS变量：

const headerEl = document.querySelector('.fixedHeader')
// 监听header尺寸变化
const resizeObserver = new ResizeObserver(entries => {
  const currentHeight = entries[0].contentRect.height
  document.documentElement.style.setProperty('--header-height', `${currentHeight}px`)
})
resizeObserver.observe(headerEl)

方案说明 #

该方案兼容原有fixed定位逻辑，但需要JS支持，且滚动条仍然会覆盖整个视口，仅作为备选方案使用。

内容的提问来源于stack exchange，提问作者Anders Rabo Thorbeck