title: Error displaying a div until it reaches the page's bottom
body: <p>I'm displaying a div in front of another div, to display a loading div with an observable; the thing is that when the loading div is displayed it grows and an "ugly scroll bar" appears, is it possible to only display the loading div until it reach the page's bottom.</p>
  
  <pre><code>&lt;html&gt; 
    &lt;head&gt;
      &lt;title&gt;Hello loading div&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="nav-bar"&gt;
          &lt;button data-bind= "click: startLoading"&gt;Start loading&lt;/button&gt;
          &lt;button data-bind= "click: stopLoading"&gt;Stop loading&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;div class="tab-content"&gt;
            &lt;!-- ko if: tabLoading --&gt;
            &lt;div class="tab-loading-mask" id="tab-loading-mask-edit"&gt;&lt;/div&gt;
            &lt;!-- /ko --&gt;
            &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/body&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>My code example is here: <a href="https://codepen.io/the-writer/pen/NXNLob" rel="nofollow noreferrer">https://codepen.io/the-writer/pen/NXNLob</a>, I'm not adding the knockout js tag because I'm only using the observable of this library.</p>