Make an overlay div fill entire of a container having overflow

Question

I want to display a loader inside the container. I am trying to display the overlay div inside the container.

if I use absolute position, the overlay also going top.

Here is Fddle : http://jsfiddle.net/vaykmry4/5/

Code :

<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>

Thanks.

Answer 1

First of all I should note that a fixed element is positioned relative to the initial containing block which is established for the html element.

Hence you should use absolute positioning to position the overlay relative to its nearest containing block which is established by the container.

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

.overlay { position: absolute; }

Second, It will work until the content start growing. When the content height gets bigger than the overlay, the overlay will not fill the entire space of the container anymore.

Since you may use JavaScript in order to to display the overlay (including loading, etc.) one solution is to add overflow: hidden; to the container to prevent from scrolling.

Finally, you should set top property of the .overlay element according to the position of the vertical scroll-bar.

Here is the jQuery version of the above approach:

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

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

EXAMPLE HERE