Question

我有一个height，它有一个固定的height: 100%，无法更改。（如果我可以让父母成为overlay的人，这个问题将不存在）

以下是我正在谈论的小提琴的链接-https://jsfiddle.net/s7maoekj/2/

现在，即使outer-container div中可以有任何内容长度，我如何才能使content div与visiblity: hidden完全重叠？

如果您查看小提琴，理想情况下，蓝色覆盖层将完全覆盖内容。

编辑1 澄清，因为尚不完全清楚

我创建这个是为了展示我的问题。我需要随意UPDATE a SET per = code, p, pd, per WHERE per IS null;（隐藏）叠加层并将其重新带回

Answer 1

您应该将覆盖层包裹在内容周围，并更改覆盖层的宽度和高度。这是小提琴链接：https://jsfiddle.net/3rfk0u57/15/。这是代码：

<div class="outer-container">
  <div class="overlay">
    <div class="content">
      This is my content<br>
      ...
      This is my content<br>
    </div>
  </div>
</div>

.outer-container {
    position: relative;
    height: 200px;
    flex: 1;
    overflow: auto;
    background-color: #f2f2f3;
}

.overlay {
    margin: 0 auto;
    visibility: visible;
    opacity: 0.5;
    background-color: lightblue;
}

Answer 2

您可以添加一些JavaScript来完成魔术：

var ctt = document.getElementsByClassName('content');
var hgt = ctt[0].clientHeight;
var oly = document.getElementsByClassName('overlay');
oly[0].style.height = hgt + 'px';

var ctt = document.getElementsByClassName('content');
var hgt = ctt[0].clientHeight;
var oly = document.getElementsByClassName('overlay');
oly[0].style.height = hgt + 'px';

.outer-container {
    position: relative;
    height: 200px;
    flex: 1;
    overflow: auto;
    background-color: #f2f2f3;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 9998;
    visibility: visible;
    opacity: 0.5;
    background-color: lightblue;
}

<div class="outer-container">
  <div class="overlay"></div>
  <div class="content">
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
    This is my content<br>
  </div>
</div>

当然，使用jQuery会更简单：

var hgt = $('.content').height();
$('.overlay').height(hgt);

当父级固定高度时，如何在其父级上覆盖div

2 个答案: