如何将浮动子 div 的高度扩展到父级的高度? [英] How can I expand floated child div's height to parent's height?

问题描述

我的页面结构如下:

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

现在，child-left DIV 将有更多的内容，因此 parent DIV 的高度随着子 DIV 的增加而增加.

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

解决方案

对于 parent 元素，添加以下属性:

.parent {溢出:隐藏；位置:相对；宽度:100%；}

然后对于 .child-right 这些:

.child-right {背景:绿色；高度:100%；宽度:50%；位置:绝对；右:0；顶部:0；}

通过 CSS 示例查找更详细的结果此处以及有关等高列此处.

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.

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

解决方案

For the parent element, add the following properties:

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

then for .child-right these:

.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.

这篇关于如何将浮动子 div 的高度扩展到父级的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！