title: How to make a floated div 100% height of its parent?
body: <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;
      &lt;div id="inner"&gt;&lt;/div&gt;
      Test
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#inner {
    float: left;
    height: 100%;
  }
  </code></pre>
  
  <p>Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.</p>
  
  <p>How can I force it to be 100% of the height of the parent div?</p>