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

Question

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

我的页面结构如下：

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

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

现在，child-leftdiv将有更多的内容，因此parentDIV的高度随着孩子的DIV的增加而增加。

但问题是child-right高度没有增加。我怎么能让它的高度和它的父母一样高呢？

Answer 1

为parent元素，添加以下属性：.parent {     overflow: hidden;     position: relative;     width: 100%;}然后为了.child-right这些：.child-right {     background:green;     height: 100%;     width: 50%;     position: absolute;     right: 0;     top: 0;}使用css示例查找更详细的结果。

Answer 2

父母：display: flex;儿童：align-items: stretch;您应该添加一些前缀，检查caniuse。