React项目布局：固定header后剩余空间占满且页面无滚动实现问题

方案一（推荐，即你提到的第一种方案优化版） #

核心是用flex弹性布局实现高度自动分配，不需要手动计算高度，后续修改header高度也无需调整其他代码：

• 第一步：先重置全局默认样式，消除浏览器自带边距导致的溢出问题

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

• 第二步：给App根组件设置垂直flex布局，占满全屏高度

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止整个页面出现滚动条 */
}

• 第三步：给header设置固定高度，禁止挤压

.header {
  height: 60px; /* 替换为你实际的header高度 */
  flex-shrink: 0;
}

• 第四步：给内容区设置flex属性自动占满剩余高度

.main {
  flex: 1; /* 自动填充剩余所有垂直空间 */
  overflow-y: auto; /* 内容超出时仅内容区内部滚动，不影响整体页面 */
}

你之前的问题是没有给父元素开启flex布局，直接给.main设置100%高度会直接继承App的100vh高度，加上header的高度就会超出视口出现滚动条。

方案二（fixed固定定位版） #

如果你要用fixed定位的方案，实现方式如下：

• header样式：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 替换为实际高度 */
  z-index: 999; /* 防止被其他元素遮挡 */
}

• 内容区样式：

.main {
  height: calc(100vh - 60px); /* 减去header的高度 */
  padding-top: 60px; /* 顶开header的高度，避免内容被遮挡 */
  overflow-y: auto;
}

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