Javascript 用另一个div完全覆盖溢出div

这是一个很难解释的问题，所以请容忍我，或者直接跳到

我有一个定义了最大高度的Div，下面的x设置为滚动。在这个Div中，在这个实例中有一堆列表项addresses。当然，其中可能有很多，它们可能会溢出，这很好。我想要的是一个“cover”div，它指示此面板已禁用。我在主div中放置了一个绝对定位的div，就像这样

<div style="max-height:150px;overflow:auto;position:relative">
    <ul>
        <li>Church Walk, Access To Foxholes Farm, DT2 9HG
        </li>
        <li>Garden Cottage, Access To Foxholes Farm, DT2 9HG
        </li>
        <li>Little Bride, Access To Foxholes Farm, DT2 9HG
        </li>
        ...etc
    </ul>
    <div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% ">
        <p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
    </div>
</div>

然后，当用户执行某项操作，覆盖内容并使其显示为禁用时，会显示此消息。伟大的当我的列表项溢出时会出现问题。当覆盖div出现时，它仅覆盖父div的当前可见部分，这意味着如果我向下滚动div，它将显示为“未覆盖”，因为覆盖div仅覆盖父div的高度，不包括其溢出部分

这真的很难解释，所以请转到我的并单击其中一个地址。你会看到这个部门被覆盖了。如果您随后向下滚动该div，您将看到列表底部的项目未被覆盖

这也反过来起作用，因此如果您单击“隐藏覆盖div”按钮以除去封面，然后单击列表底部的一个地址，您将看到“封面”仍然只覆盖div的顶部

---

关于如何使cover div扩展其父级的整个高度（包括溢出）有什么想法吗？欢迎并鼓励其他替代解决办法。请记住，我不一定需要覆盖在顶部的“搜索”文本，只要“封面”就足够了。

3个div而不是2个div就可以了：

html:

<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
    <div id="insideDiv">
        <ul ...

        </ul>
        <div id="overlayDiv" style="display:none;">
            <p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
        </div>
    </div>
</div>

---

3个div而不是2个div运行良好：

html:

<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative">
    <div id="insideDiv">
        <ul ...

        </ul>
        <div id="overlayDiv" style="display:none;">
            <p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p>
        </div>
    </div>
</div>

---

我会将覆盖从父对象中取出，设置一个z索引，并将其放置在具有负边距的地址选择器上

---

我会将覆盖从父对象中取出，设置一个z索引，并将其放置在具有负边距的地址选择器上

这也很好：

这也很好：

---

这也是我以前见过的一种模式：

---

这也是我以前见过的一种模式：

---

那是一笔大数目的钱。为此干杯。这似乎是一个过于简单的解决方案：这是一笔巨款。为此干杯。这似乎是一个过于简单的解决方案：这很聪明。我自己更喜欢公认的解决方案，但这也很有效。这很聪明。我自己更喜欢被接受的解决方案，但这也很有效。

#overlayDiv{
    background-color: white;
    opacity: 0.8;
    height: 100%;
    width:100%;
    position:absolute;
    z-index:9999;
    margin-top:-150px;
    height:150px;
}

var height = $('#addressPicker li').height();
$.each($('#addressPicker li'), function (i, addr) {
    height += $(this).height();
    $('#overlayDiv').css("height", height + "px");
    etc..

#overlayDiv {
    background-color: white;
    opacity: 0.8;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}