1

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

我有一个定义了 max-height 和 overlow-x 设置为滚动的 Div。在这个 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 扩展其父级的整个高度的任何想法，包括溢出？欢迎和鼓励其他替代解决方案。请记住，我不一定需要覆盖在顶部的“搜索”文本，只需“封面”就足够了。

4

4 回答 4

6

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%;    
}
于 2013-07-01T13:22:39.507 回答
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..
于 2013-07-01T13:38:49.467 回答
1

我会将覆盖从父级中取出，设置一个 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;
}
于 2013-07-01T13:29:52.353 回答
1

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

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

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}
于 2015-12-31T03:19:14.170 回答