Div to loading ajax in full screen?

Question

I’m using Bootstrap 3 and created a <div> that works in full screen for an ajax loading, this works well if the screen is docked, without scrollbar in vertical. But now I noticed that if the page has scroll bar vertically, ie a page with the heigth greater than the defined <div> loading is not displayed on the whole screen, it does not auto fit.

How to solve this problem ?

CSS

/** loading */
#div_loading  {    
    position:absolute;
    top:0;
    left:0;
    z-index:11;
    background-color:#000;
    min-height:100%;
    width:100%;    
    height:auto;
    opacity: .50;
    filter: alpha(opacity=65);
    background-image: url(../Imagens/ajaxloader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px;
    display:none;    
}

Here’s a picture of what it looks like when it’s scrolling vertically.

Answer 1

Have you tried with position: fixed?

$(".overlay").mouseover(function(){
    $(".overlay").css("background-image",
    "url(https://i.stack.imgur.com/8t6P3.gif)",
    );
});

$( ".overlay" ).click(function() {
    alert( "Click!" );
});

$(".overlay").mouseout(function(){
    $(".overlay").css("background-image",
    "url(https://i.stack.imgur.com/BNGOI.gif)",
    );
});

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(70,20,15,0.3);
    z-index: 2;
    background-image: url(https://i.stack.imgur.com/BNGOI.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="overlay"></div>
<h1>Иус ат веро афферт</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt sollicitudin facilisis. Ut tempor odio non iaculis cursus. Cras fermentum porttitor dui, vel consectetur risus auctor id. Integer a congue erat. Vivamus vulputate ex lacus, vel vehicula neque varius non. Ut eu turpis luctus, placerat ante nec, pharetra metus. Aenean turpis diam, consectetur eu odio vitae, hendrerit pharetra mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus accumsan tempor cursus. Phasellus dictum lacinia metus, eu dignissim leo lacinia et. Vivamus hendrerit imperdiet dictum. 
In sem eros, vestibulum feugiat efficitur ut, scelerisque ac diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper sem nisi, at rutrum orci viverra vel. In hac habitasse platea dictumst. Suspendisse sollicitudin lobortis nunc, non pretium erat tempor vitae. Mauris porta malesuada lorem eu elementum. Nulla libero elit, feugiat a ullamcorper sed, pulvinar ac augue. Cras lacinia mauris vel mauris faucibus consequat. Morbi est mauris, semper eget ante ut, euismod ornare mi. Ut ligula erat, tincidunt eu erat ac, ultricies finibus turpis. 
</p>
<ul>
<li>Donec scelerisque dui leo, a luctus mi luctus sed</li>
<li>Aenean tempus dui libero, at aliquet odio</li>
<li>Vestibulum imperdiet bibendum metus</li>
<li>Pellentesque ut rutrum augue</li>
<li>Magna fermentum orci pretium</li>
<li>Maecenas mi mi, convallis rutrum ultrices ac</li>
<li>Proin at lectus massa</li>
<li>Fusce vehicula arcu odio</li>
<li>dapibus lorem</li>
</ul>
<p>
ლორემ იფსუმ დოლორ სით ამეთ, ცუ ეოს რიდენს ფუთანთ ინიმიცუს, აეთერნო დისცერე ნამ ეი. ესთ მოდო მალორუმ დენიყუე ათ, ნისლ ყუოთ იდ მეა, ნამ ნო აუგუე მელიუს. ნეც ნო მოდუს მინიმ დოცენდი, თე ფრი ადმოდუმ ცონსეცთეთუერ. გრაეცის ფერსეყუერის ეა ველ, ფოსსით სემფერ სეა ეუ. ეთ სით ევერთი დოლორეს, იუს ცუ ოდიო რიდენს ალიენუმ.
</p>