title: Stretch a block element to fill 100% vertical scroll height of its parent element
body: <p>I have a layout with a vertical scroll. One of the child elements within the scrollable div is absolutely positioned with a large top value, inducing a vertical scrollbar on the parent. 
  The scrollable parent div also has some child div elements (lets call them pillars) positioned horizontally adjacent to each other via position: absolute and some left value. </p>
  
  <p>Here's the HTML markup:</p>
  
  <pre><code>&lt;div id="root" style="height: 250px; position: relative;"&gt;
  &lt;div class="stretch"&gt;
      &lt;div id="container" class="container"&gt;  
           &lt;div id="pillar1" style="left: 0.0%; width:33.25%;" class="pillar" &gt;&lt;/div&gt;
           &lt;div id="pillar2" style="left: 33.05%; width:33.25%;" class="pillar" &gt;&lt;/div&gt;
           &lt;div id="pillar3" style="left: 66.05%; width:33.25%;" class="pillar" &gt;&lt;/div&gt;     
           &lt;div id="fixed-and-not-movable" style="background: blue; width: 25px; height: 25px; top:350px; left: 150px; position: absolute;"&gt;
      &lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the CSS:</p>
  
  <pre><code>.stretch {
      bottom: 0; 
      left: 0; 
      right: 0; 
      top: 0; 
      position: absolute; 
      height: auto; 
      width: auto;    
  }
  
  .container {
      border: 2px solid;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      position: absolute;
  }
  
  .pillar {
      border: 1px dotted red;
      bottom: 0;
      height: 100%;
      position: absolute;
      top: 0;    
  }
  </code></pre>
  
  <p>I want the pillar divs to capture the entire scroll height of the parent "container". Right now their height is the parents client height (not scroll height). So when you scroll down you will notice the pillars are not filling all the available height inside the overflow:scroll.</p>
  
  <p>Can someone suggest changes to CSS classes (<code>.container</code> and/or <code>.pillar</code>) to make this work. </p>
  
  <p>Here's a link to js fiddle showing the same problem: 
  <a href="http://jsfiddle.net/AshwinPrabhuB/2o5whkmq" rel="noreferrer">http://jsfiddle.net/AshwinPrabhuB/2o5whkmq</a></p>
  
  <p>Thanks!</p>