CSS:如何让 child1 与 child2 的高度相同？

Question

我有 2 个元素，我希望第一个元素的高度等于第二个元素的高度(这个高度可以变化，因为这个元素可以包含图片或视频...)。

我试图将它们封装在同一个容器中，并将 float:left 属性设置为子 1，以便容器的高度等于子 2(因为 float 元素不将高度添加到容器)。容器的高度没问题(等于 child 2 的高度)但我仍然不能让 child 1 的高度等于其容器的高度。

你可以看到这是这个 fiddle (我希望黄色部分包含在绿色边框内，并且在黄色部分出现一个滚动条...不使用 JavaScript):
JSFiddle

<div id='container'>
    <div id='child1'>
        test1<br>test1<br>test1<br>test1<br>test1
    </div>
    <div id='child2'>
        test2<br>test2<br>test2
    </div>
</div>

#container{
    border:green solid 5px;
}

#child1{
    float:left;
    background:yellow;
    overflow-y:auto;
}

#child2{
    background:blue;
}

感谢您的帮助!
帕特

Answer 1

LIVE DEMO

#container{
    position:    relative;  /* needed */
    border:      green solid 5px;
}

#child1{
    position:    absolute;  /* needed */
    background:  yellow;
    overflow-y:  auto;
    height:      100%;      /* fit parent */
    width:       20%;       /* note */
}

#child2{
    margin-left: 20%;       /* note*/
    background:  blue;
}