How to make a floated div 100% height of its parent?
Here is the HTML:

    <div id="outer">
        <div id="inner"></div>
        Test
    </div>

And here is the CSS:

    .inner {
        float: left;
        height: 100%;
    }

Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.

How can I force it to be 100% of the height of the parent div?
How to make a floated div 100% height of its parent?
===

Here is the HTML:

    <div id="outer">
        <div id="inner"></div>
        Test
    </div>

And here is the CSS:

    .inner {
        float: left;
        height: 100%;
    }

Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.

How can I force it to be 100% of the height of the parent div?