Question

这是一个难以解释的问题所以请耐心等待（或直接跳到jsfiddle）

我有一个定义了最大高度的Div和设置为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的顶部。

关于如何制作封面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%;    
}

Answer 2

这也很好用：

http://jsfiddle.net/JhGCn/3/

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

Answer 3

我会将叠加层从父级中取出，设置一个z-index并将其放在带有负边距的地址选择器上。

http://jsfiddle.net/JhGCn/1/

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

Answer 4

这也是我之前见过的模式：http://jsfiddle.net/6oa6grn9/

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

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

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

4 个答案: