CSS - 覆盖 div 高度：100% 包括滚动区域不起作用

Question

我正在尝试做一些非常简单的事情。
我有div滚动，我希望覆盖 div 将覆盖所有高度，包括滚动区域。我试过min-height:100%（就像在这个问题中一样）但它不起作用。

这是一个例子https://jsfiddle.net/svfukxjd/2/

.main {
  height: 300px;
  width: 150px;
  background: red;
  overflow: auto;
  position: relative;
}
.cover {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  background: green;
  opacity: 0.5;
}

<div class="main">
  <div>
    Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
    <br>Test
  </div>
  <div class="cover">

  </div>
</div>

Answer 1

1. cover作为包含您的内容的 div 的子项添加。

2. cover相对于内容 div 的位置：

   .main > div {
     position: relative;
   }
   

让我知道您对此的反馈。谢谢！

.main > div {
  position: relative;
}

.main {
  height: 300px;
  width: 150px;
  background: red;
  overflow: auto;
  position: relative;
}
.main > div {
  position: relative;
}
.cover {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  background: green;
  opacity: 0.5;
}