如何让overflow元素占据剩余垂直高度？解决双滚动条问题

阿华AIGC实验室

2026-5-9

解决双滚动条问题：让动态Header + 滚动Content完美适配视口

我明白你遇到的痛点——当把body作为溢出容器时，常规的flex布局方案容易出问题，导致出现多余的文档滚动条。咱们来一步步解决这个问题：

问题根源分析

你代码里的双滚动条，罪魁祸首是给.content设置了height: 100%。因为.box已经是高度100%的flex容器，.content的flex: 1本来就会让它自动占据.box的剩余空间。但额外加的height: 100%会让.content强制和.box一样高，再加上.header的高度，整个.box就超出了视口高度，触发了body的滚动条。

修复方案

只需要做两处关键修改：

移除.content的height: 100%，让flex布局自然分配剩余空间
给.content添加display: flex和flex-direction: column，让内部的.items能自动占满.content的可用高度（用flex比硬设height:100%更适配动态布局场景）

完整修复后的代码

html, body { height: 100%; margin: 0; overflow: hidden; } /* 锁定body，避免意外滚动 */
.box { display: flex; flex-flow: column; height: 100%; }
.header { flex: 0 1 auto; }
.content { flex: 1 1 auto; background-color: #ddd; display: flex; flex-direction: column; }
.items { overflow-y: auto; flex: 1; } /* 用flex:1占满.content的剩余空间 */

<div class="box">
  <div class="header">
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
    <div class="header-item">header item</div>
  </div>
  <div class="content"> fills remaining space
    <div class="items">
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
      <div class="item">content item</div>
    </div>
  </div>
</div>