title: Child height to be 100% of scrollable parent content height
body: <p>Please consider this fiddle: <a href="http://jsfiddle.net/eKJAj/" rel="noreferrer">http://jsfiddle.net/eKJAj/</a></p>
  
  <p>I'm trying to have an absolute positioned div (the red line) to take the whole height of the total height of its (yellow) parent ; not just the parent's visible height.</p>
  
  <p>If you try the fiddle you'll see the red bar doesn't go the whole way down when you scroll the yellow div. Also it can't be bigger than its parent if some blue sections are removed.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="bar"&gt;&lt;/div&gt;
      &lt;div class="section"&gt;&lt;/div&gt;
      &lt;div class="section2"&gt;&lt;/div&gt;
      &lt;div class="section2"&gt;&lt;/div&gt;
      &lt;div class="section2"&gt;&lt;/div&gt;
      &lt;div class="section2"&gt;&lt;/div&gt;
      &lt;div class="section2"&gt;&lt;/div&gt;
      &lt;div class="section"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;input type="button" value="hide" onclick="$('.section2').slideUp(400)" /&gt;
  &lt;input type="button" value="show" onclick="$('.section2').slideDown(400)" /&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.parent{
      position:relative;
      width:100%; max-height:300px;
      background-color:yellow;
      overflow-y:auto;
  }
  
  .bar{
      position:absolute; left:50px;
      width:1px; height:100%;
      background-color:red;
  }
  
  .section, .section2{
      width:100%; height:70px;
      margin-bottom:3px;
      background-color:blue;
  }
  </code></pre>
  
  <p>I have been trying a few options for the blue bar such as <code>top:0px; botom:0px</code> or <code>position:relative; margin-left:50px</code> and even made an attemps with floating the red line, to no avail.</p>
  
  <p>If possible I'd rather keep it CSS only. Any hint much appreciated!!</p>