css - 如何在溢出的整个滚动过程中获得完整的 div？

Question

我有一个 absolute 定位的 div 和下面的一些 float div。无论绝对定位的 div 有多大或多小，我如何只使用 CSS 使橙色和蓝色 div 在整个滚动过程中达到全高？

编辑 因为可能还不清楚，绝对定位的 div 的高度是动态的，我不会提前知道。高度是为演示目的而设置的。

.container {
  width: 250px;
  height: 250px;
  border: 1px solid red;
  overflow-y: scroll;
  position: relative;
}

.block {
  float: left;
  position: static;
  min-height: 100%;
}

.block1 {
  width: 100px;
  border-right: 1px solid black;
  background: blue;
}

.block2 {
  width: 120px;
  border-right: 1px solid black;
  background: orange;
}

.overlay {
  width: 10px;
  background: yellow;
  height: 500px;
  position: absolute;
  left: 10px;
}

  <div class='container'>
    <div class='block block1'>block1</div>
    <div class='block block2'>block2</div>
    <div class='overlay'></div>
  </div>

Answer 1

一种方法是不在 container 上设置明确的高度，并将 block 高度设置为 100%。

block, container {
  height: 100%;
}