React如何让中间内容div自适应占满固定头部与页脚之间的剩余高度

云上老周

2026-9-26

解决方案

推荐使用CSS Flexbox垂直布局实现，无需给中间内容块设置固定高度，可完美适配所有屏幕尺寸，核心逻辑是让外层容器占满视口高度，中间块自动填充剩余空间。

完整可运行代码示例

return (
  // 最外层flex容器，占满整个视口高度
  <div style={{ 
    height: '100vh', 
    display: 'flex', 
    flexDirection: 'column',
    margin: 0,
    padding: 0,
    boxSizing: 'border-box'
  }}>
    {/* 头部区块：固定在顶部，高度随内容自适应 */}
    <div style={{ 
      padding: '0.8%', 
      backgroundColor: 'red' 
    }}>
      Block 1
    </div>

    {/* 内容区块：自动占满头部和页脚之间的剩余空间，内容超出时自动出现滚动条 */}
    <div style={{ 
      flex: 1, 
      overflowY: 'auto', 
      backgroundColor: 'aqua',
      width: '100%'
    }}>
      Block 2
    </div>

    {/* 页脚区块：固定在底部，固定高度40px */}
    <div style={{ 
      display: 'flex', 
      height: '40px', 
      backgroundColor: 'grey'
    }}>
      Block3
    </div>
  </div>
);

实现要点

全局样式提前重置默认边距：在项目全局CSS中添加* { margin: 0; padding: 0; box-sizing: border-box; }，避免浏览器默认边距导致页面出现多余的横向/纵向滚动条。
最外层容器设置height: 100vh直接占满浏览器可视区域高度，flexDirection: 'column'让所有子元素垂直排列。
中间内容块仅需添加flex: 1属性，浏览器会自动计算剩余高度分配给该区块，完全适配不同屏幕尺寸。
若需要适配移动端100vh兼容性问题，可将最外层容器的height: 100vh替换为minHeight: '100%'，同时在全局CSS中给html、body标签设置height: 100%即可。