可变身高父母（基于第一个孩子），全高第二个孩子

Question

这是一个很好的。

我有以下布局：

<div class="parent">
    <div class="child-left">
        <div class="grandchild">Stuff</div>
        <div class="grandchild">Other stuff</div>
        <div class="grandchild">Stuff</div>
    </div>
    <div class="child-right">
        Parent based on expanding height of this element<br/>
        stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>stuff <br/>
    </div>
</div>

http://jsfiddle.net/fmpeyton/c8s9epea/

我试图让.grandchild元素扩展到.parent元素的100％，这将根据.child-right的内容进行扩展。我知道如果我向父母添加一个定义的高度，元素将正确扩展，但这不是理想的。

如何在这种情况下将.grandchild元素扩展到.parent元素的高度？

Answer 1

您只需将父级和子级中的CSS更改为：

.parent {
  overflow: hidden;
  position: relative;
}

.child-left {
  width: 25%;
  float: left;
  background: red;
  height: 100%;
  position: absolute;
}

查看代码here。