html - CSS - 覆盖 div 高度 :100% including scroll area is not working

Question

我正在尝试做一些非常简单的事情。
我有带滚动功能的 div，我希望覆盖 div 覆盖所有高度，包括滚动区域 . 我试过 min-height:100%(就像在 this question 中一样)但它不起作用。

这是一个例子 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. 相对于内容 div 的位置 cover 使用:

   .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;
}

<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 class="cover">
    </div>
  </div>
</div>