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

【问题标题】：CSS - overlay div height:100% including scroll area is not workingCSS - 覆盖 div 高度：100% 包括滚动区域不起作用
【发布时间】：2017-02-28 17:54:48
【问题描述】：

我正在尝试做一些非常简单的事情。
我有带有滚动条的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>

【问题讨论】：

标签： html css scrollbar overflow overlay

【解决方案1】：

添加 cover 作为包含您的内容的 div 的子级。
相对于内容 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>

【讨论】：

我遇到了同样的问题，这个解决方案不起作用。直到我意识到我有 display: flex;在主 > div 框上。移除显示：flex 让它像魅力一样工作

【解决方案2】：

IT 或许可以解决你的问题，但你必须稍微改变一下你的结构。fiddle

Add .cover to inside div containing test

【讨论】：

【解决方案3】：

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

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

【讨论】：