title: HTML/CSS - Scrollable section does not fit to the page.
body: <p>I have a web application, which I did not develop myself, but am tasked with cleaning up a few things that are no longer working.</p>
  
  <p>There is one issue that I am not really able to figure out why it is happening.</p>
  
  <p>The web application is split into two panels. However, the second panel which is scrollable does not reach the bottom of the page, when a user scrolls all the way down.</p>
  
  <p>Also by zooming out (ctrl -) we get a blank area at the bottom, although the panel can continue scrolling.</p>
  
  <p>Id like to have this panel, scroll as if it was the full page.</p>
  
  <p>Ive put a quick static copy up on fiddle at.</p>
  
  <p><a href="https://jsfiddle.net/brianz820/qmzw8923/" rel="nofollow">https://jsfiddle.net/brianz820/qmzw8923/</a></p>
  
  <p>The section in question I believe is.</p>
  
  <pre><code>&lt;div id="house-estimates-scroll-panel"&gt;
      &lt;div id="house-estimates-listing"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  div#house-estimates-scroll-panel {
      position: relative;
      /*display: inline-block;*/
      margin: 0;
      padding: 0;
      height: 1200px;
      /*height: 100%;*/
      /*width: 100%;*/
      overflow-y: visible ;
      overflow-x:hidden;
      background-image: linear-gradient(to right, #f3f3f3 , #bbb);
      background-size: 15px 20px;
      background-position: right;
      background-repeat: repeat-y;
  
  }
  
  div#house-estimates-listing {
      margin: 0;
      padding: 0;
      height: 90000px;
      /*width: 320px;*/
      /*width: 960px;*/
  }
  </code></pre>
  
  <p>Ive added the full HTML and CSS sections to the fiddle.</p>