如何将浮动子 div 的高度扩展到父级的高度？

我的页面结构如下：

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

现在child-leftDIV 的内容会更多，所以parentDIV 的高度随着子 DIV 的增加而增加。

但问题是child-right身高没有增加。我怎样才能使它的高度等于它的父级？

For the parent元素，添加以下属性：

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

然后对于.child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

通过 CSS 示例查找更详细的结果here http://jsbin.com/nimeguxuda/1/edit?html,css,output以及有关等高列的更多信息here http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks.