title: Parent div not taking 100% height of container div
body: <p>I've got 4 nested <code>div</code>'s naming: <code>wrap</code> > <code>container</code> > <code>parentBox</code> > <code>childBox</code>. </p>
  
  <p>Container <code>div</code> is 100% minus 70px (70px is the height of the footer (60) plus 10px = 70px).</p>
  
  <p>I want the <code>parentBox</code> take the rest of the height (100%) the container <code>div</code> has left. 
  And I want childBox take 100% of the parentBox <code>div</code>, minus the <code>header</code> (also inside the <code>parentBox</code> containing the word 'test') which is 40px heigh;</p>
  
  <p>But the result I get is that the <code>parentBox</code> and <code>childBox</code> taking the minimum height of what the table's height is.</p>
  
  <p>I came across a few posts about this here on SO, but none of them helped me with this issue.</p>
  
  <p>Why is this not working?</p>
  
  <p>See <a href="http://jsfiddle.net/e62Wu/29/" rel="nofollow">jsFiddle</a></p>
  
  <p>EDIT: The code which I think is relevant:</p>
  
  <pre><code>#wrap {
        height: 100%;
        /* Negative indent footer by its height */
        margin: 0 auto -60px;
        /* Pad bottom by footer height */
        padding: 0 0 60px 0px;
      }
  
  .parentbox {
      width: 100%;
      padding: 0px 3px 5px 5px;
      margin-bottom: 0px;
      overflow: hidden;
      min-height:100%;
      border:1px solid #000;
  }
  
  .childbox {
      overflow: auto;
      overflow-x: hidden;
      min-height:100%;
      border:1px solid #000;
  }
  </code></pre>