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

将您的身高从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

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

3 个答案: