如何让div占满可滚动容器的整个滚动区域高度

核心逻辑：当前布局存在两个核心问题：一是绝对定位的event元素脱离文档流，无法撑开滚动容器的内容高度；二是header同时作为滚动容器和flex容器时，直接子元素grid的高度默认仅匹配header的可视高度，无法跟随滚动区域自动拉伸。

第一步：调整DOM结构 #

在header内部新增一个滚动内容容器，把所有grid、event元素都移入该容器内：

<header>
  <!-- 新增内层滚动内容容器 -->
  <div class="scroll-wrapper">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="event event-1">1</div>
    <div class="event event-2">2</div>
  </div>
</header>

第二步：调整CSS样式 #

header {
  border: 1px solid #000;
  height: 70px;
  width: 300px;
  overflow-y: scroll;
  box-sizing: border-box;
}

.scroll-wrapper {
  /* 高度设置为你需要的滚动区域总高度，示例里两个event总高度为100px，可根据实际内容调整 */
  height: 100px;
  width: 100%;
  display: flex;
  position: relative;
}

.grid {
  border: 1px solid green;
  flex-grow: 1;
}

.event {
  position: absolute;
  border: 1px solid red;
  height: 50px;
  padding: 0;
  width: 92px;
  background: rgba(200,0,0, 0.05)
}

.event-2 {
  transform: translateY(100%)
}

动态高度适配 #

如果event的数量、高度是动态生成的，可通过JS计算所有event元素的最大底部位置，赋值给.scroll-wrapper的height属性即可：

const wrapper = document.querySelector('.scroll-wrapper')
const events = document.querySelectorAll('.event')
let maxBottom = 0
events.forEach(el => {
  const rect = el.getBoundingClientRect()
  const bottom = rect.top - wrapper.getBoundingClientRect().top + rect.height
  maxBottom = Math.max(maxBottom, bottom)
})
wrapper.style.height = `${maxBottom}px`

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