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

Question

这很难解释，所以请忍受我（或直接跳到jsfiddle）

我有一个Div，其中定义了max-height并设置了overlow-x来滚动。在这个Div中，有一堆列表项（在这种情况下，是地址）。当然，其中可能有很多，它们会溢出，效果很好。我想要的是一个“ 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仅跨越父对象的高度，不包括其上溢。

这真的很难解释，所以请转到我的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%;    
}