无需position absolute，实现动态高度下仅div内容区滚动

原代码 #

HTML #

<div class="block">
  <div class="header">Some text</div>
  <div class="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p><p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
    </p>
  </div>
</div>

CSS #

.block {
  width: 800px;
  height: 200px;
  border: 1px solid red;
  overflow-y: auto;
}

.content {
  overflow-y: auto;
}

需求说明 #

仅让content区域独立滚动，header高度为动态值（无法设置固定高度），且禁止使用position: absolute属性。

可行解决方案 #

有两种主流实现方案，均无需依赖固定高度或绝对定位，适配现代浏览器：

方案1：Flexbox布局 #

通过Flex布局让header自适应高度，content自动填充剩余空间并开启滚动：

.block {
  width: 800px;
  height: 200px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  /* 移除原有的overflow-y: auto，避免整体滚动 */
}

.header {
  flex-shrink: 0; /* 确保header不会被压缩，保持自身内容高度 */
}

.content {
  flex: 1; /* 占据容器剩余所有空间 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

方案2：Grid布局 #

利用Grid的行高分配规则，让header行自适应，content行占据剩余空间：

.block {
  width: 800px;
  height: 200px;
  border: 1px solid red;
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行高度由内容决定，第二行占满剩余空间 */
}

.content {
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

两种方案均能完美适配header的动态高度，且不违反需求限制。

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