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

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>

Answer 2

将您的身高从height:100%;更改为height:100vh;

.cover
{
    position:absolute;
    height:100vh;  
    width:100%;
    top:0;
    bottom:0;
    background:green;
    opacity:0.5;
}

Answer 3

IT可能是您问题的解决方案但是您必须稍微改变一下您的结构。fiddle

Add .cover to inside div containing test