title: 100% height of parent. All parent heights are dynamic
body: <p>I've read through tons of questions and articles and I can't seem to figure this out.</p>
  
  <p>Here's a rough example of my layout structure:</p>
  
  <pre><code>body  
  - div 1 (header)  
  - div 2 (main content wrapper)  
  - - div 2a  
  - - - div 2a1  
  - - - div 2a2  
  - - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)  
  - - - div 2a3  
  - - div 2b  
  - div 3 (footer)
  </code></pre>
  
  <p>I believe my main problem stems from the fact that all the child elements of 2a are floated left.</p>
  
  <p>All the answers I've found talk about adding 100% height the parent containers, including the html and body tags. But I can't just go through and add height: 100%; to all every ascending parent because it ends up breaking my layout. Specifically so, when I add height 100% to my main content wrapper, div 2.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/norsewulf/Duy9M/" rel="nofollow">jsfiddle</a> I made that represents my problem quite well.</p>