Div高度在另一个Div高度的基础上

Question

我正在尝试添加一个div，其高度取决于另一个div的长度。

例如aDIV aDIV B包含表示DIV反馈的内容。如果DIV BDIV A的长度大于应该显示为可滚动的，而不是扩展它的高度。

<div class="A col-md-9">
content
</div>
<div class="B col-md-3">
feedback content
</div>

Answer 1

可以通过CSSflex实现。您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/

上阅读更多内容此外，您应该将这些A col-md-9添加到像<div class="A col-md-9">这样的类中，现在我已经重构了代码。

.parent {
display: flex;
}
.A, .B {
border: 1px solid #ccc;
}

<div class="parent">
<div class="A col-md-9">
content<br>More Content<br> And more content...
</div>
<div class="B col-md-9">
feedback content
</div>
</div>

Answer 2

您必须为两个div设置相同的高度，然后使overflow: auto并在其中添加另一个div

<div class="A col-md-9">
<div>
content
</div>
</div>
<div class="B col-md-3">
<div>
feedback content
</div>
</div>

css:

.A {
height: 50px;
overflow: auto;
}
.B {
height: 50px;
overflow: auto;
}

更新:如果你想有基于Adiv的高度，你需要先得到Adiv的高度，并将高度设置为Bdiv

const height = document.getElementsByClassName('A')[0].offsetHeight;
document.getElementsByClassName('B')[0].style.height = height + 'px';

然后你不需要在A和B类中添加高度

.A, .B {
overflow: auto;
}

知道你在Adiv内容的基础上设置Bdiv的高度，如果Bdiv有更多的内容，它会在滚动视图模式下显示，而不是扩展其高度。

this works for me