CSS - 将子DIV高度浮动到父级高度

问题描述：

我的页面结构为：

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

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

现在，子元素 DIV将会有更多的内容，所以父 DIV的高度根据子DIV增加。

Now, the child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.

但问题是 child-right height没有增加。如何让它的高度等于它的父级？

But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?

答

为父元素添加以下属性

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

然后用于 .child-right $> b
$ b

then for .child-right these:

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

You can find more detailed results with CSS examples here: http://jsbin.com/nimeguxuda/1/edit?html,css,output