css - CSS：如何让 child1 与 child2 高度相同？

Question

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

我试图将它们都封装在同一个容器中，并将float:left属性设置为子 1，以便容器的高度等于子 2（因为浮动元素不会将高度添加到容器中）。容器的高度还可以（等于孩子 2 的高度），但我仍然不能让孩子 1 的高度等于其容器的高度。

你可以看到这就是这个小提琴（我希望黄色部分包含在绿色边框内，并且滚动条出现在黄色部分......不使用 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

现场演示

#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;
}

Answer 2

你的意思是孩子1要继承的容器值吗？如果是这样，孩子 1 应该有一个值height: inherit;