如何制作100%高度可滚动区的div

Question

我有一个固定高度的div容器。这个div里面有一些内容，这使得它可以滚动。我需要在容器内插入一些div，并使它们具有100%的可滚动区域高度。我该怎么做呢？

示例如下：

​

header {
  border: 1px solid #000;
  height: 70px;
  width: 300px;
  overflow-y: scroll;
  display: flex;

  position: relative;
  box-sizing: border-box;
}

.grid {
  position: relative;
  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%)
}

<header>
    <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>
</header>

​

我需要使绿色的方框完全高度的可滚动区域。

Answer 1

如果你可以使用Javascript，一个优雅的解决方案是：

let headerHeight = document.querySelector('header').scrollHeight ;
let grid = document.getElementsByClassName('grid') ;


for (let i = 0; i < grid.length ; i++){
  grid[i].style.height = headerHeight + 'px' ;
}

因为我们需要捕捉总的滚动高度，所以如果不改变DOM结构，就不能在完整的CSS中做到这一点。

Answer 2

只需将网格的高度设置为所需的值并使用

.grid{
overflow:scroll;
}