我有 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;
}
感谢您的帮助!
帕特
最佳答案
#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;
}
关于CSS:如何让 child1 与 child2 的高度相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19908384/