CSS

Question

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

.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

添加 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>

Answer 2

它可能会解决你的问题，但你必须稍微改变一下你的结构。fiddle

Add .cover to inside div containing test

Answer 3

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

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

CSS - 覆盖 div height:100% 包括滚动区域不起作用

CSS - overlay div height:100% including scroll area is not working

html

overlay

overflow

scrollbar