可变高度 parent（基于第一个 child），第二个全高 child

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 的内容扩展。我知道如果我向 parent 添加定义的高度，元素将正确展开，但这并不理想。

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

Answer 1

您只需将您的 CSS 在 parent and child left 更改为：

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

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

查看代码 here。