javascript - 用另一个 div 完全覆盖溢出的 div

Question

这很难解释，所以请耐心等待(或者直接跳到 jsfiddle)

我有一个定义了 max-height 和 overlow-x 设置为滚动的 Div。在这个 Div 中有一堆列表项(在本例中为地址)。当然可以有很多这样的东西，它们可以溢出，效果很好。我想要的是一个“封面”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 仅跨越父级的高度，不包括其溢出。

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

反之亦然，因此如果您单击“隐藏覆盖 div”按钮以去除封面，然后单击列表底部的地址之一，您将看到“封面”仍然存在只覆盖 div 的顶部。

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

Answer 1

3 个 div 而不是 2 个效果很好:

http://jsfiddle.net/JhGCn/2/

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>

CSS:

#insideDiv {
    width: 100%; 
    height: 100%;
    position: relative;
}

#overlayDiv {
    background-color: white;
    position: absolute;
    top: 0px;
    opacity: 0.8;
    height: 100%;
    width: 100%;    
}