html - CSS - 将float子DIV高度展开为父级的高度(CSS - Expand float child DIV height to parent's height)

Question

I have the page structure as:

(我的页面结构如下：)

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

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

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

(现在， child-left DIV将有更多内容，因此parent DIV的高度根据孩子DIV增加。)

But the problem is child-right height is not increasing.

(但问题是child-right身高不会增加。)

How can I make its height as equal to it's parent?

(我怎样才能使它的高度等于它的父母？)

  ask by Veera translate from so

Answer 1

For the parent element, add the following properties:

(对于parent元素，添加以下属性：)

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

then for .child-right these:

(然后为.child-right这些：)

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

Find more detailed results with CSS examples here and more information about equal height columns here .

(找到CSS的例子更详细的结果这里约等于身高列的详细信息在这里 。)