使覆盖div填充整个具有溢出的容器

Question

我想在容器内显示一个加载程序。我试图显示容器内的overlay div。

如果我使用绝对位置，则叠加层也会位于顶部。

这是Fddle： http //jsfiddle.net/vaykmry4/5/

代码：

<style>
.container
{
    margin: 25%;
    position:relative;
    width:200px;
    height:200px;
    border:3px solid #ddd;
    overflow:auto;
}

.overlay {
    width:100%;
    height:100%;
    margin:auto;
    left:0;
    top:0;
    position:absolute;
    background:#fff;
    opacity:.8;
    text-align:center;

}

.loader {
display:inline-block;
}

</style>

<div class="container">
    <div class="overlay">
      <span class="loader">
        loading...
      </span>
    </div>
    <div class="content">Here is content ... <div>
</div>

谢谢。

Answer 1

首先，我要注意一个fixed元素相对于为该元素建立的初始包含块放置的位置html。

因此，您应该使用absolute定位将叠加层相对于由所建立的最接近的包含块定位container。

.container {
    position: relative;
    overflow: auto;
}

.overlay { position: absolute; }

其次，它将一直工作到内容开始增长为止。当内容高度大于叠加层时，叠加层将不再占满容器的整个空间。

由于您可能会使用JavaScript来显示叠加层（包括加载等），因此一种解决方案是向overflow: hidden;容器添加内容以防止滚动。

最后，您应该根据垂直滚动条的位置设置元素的top属性.overlay。

这是上述方法的jQuery版本：

var $container = $(".container");

$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");

这里的例子