并排制作两个div,一个是可调整大小的,另一个是相同的高度

Question

我带来了一个css高度的戏剧.

我想制作一个布局,一个包含2个div的div在同一行,一个是可调整大小的,另一个必须适合父级的高度(与第一个相同的高度).

第一个div可以有额外的信息(所以我无法修复高度),所以它会有更多的线,重要的是它不能有滚动条.第二个div必须服从第一个高度,如果它大于它将有一个滚动条.

<div class='container'> <!-- parent -->
    <div class='left'> <!-- resizable -->
    </div>
    <div class='right'> <!-- same height as left div  -->
    </div>
</div>

未解决的代码

问题是我无法弄清楚如何使用css.或者甚至可以用css.我不想用js.

有人请帮帮我!

Answer 1

小提琴

你做的是做出正确的一个absolutely positioned停止它的高度影响父母的.

相关的CSS

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}