javascript - 制作两个高度相等的并排div

Question

这是我的最终布局

我想保持左列高度与右列高度相同。我正在简化我的 html，所以对您来说很容易。

<div id="graphsWindow" style="height:100%; ">
<div class="table" style="height: 100%">
    <div class="row" style="margin-left:0px;margin-top:0px; padding-top:0px; padding-bottom:0px; height:100%;">

   <div style="border:groove; margin-left:10px; margin-bottom:0px; padding-bottom:0px; margin-right:2px; border:groove; height:100%" class="col-md-2">
   </div>
   <div class="col-md-9" style="padding-bottom:0px; padding-top:0px; margin-top:0px; margin-left:15px; height:100%">                
   </div>

</div>
</div>

col-md-2 类的 div 包含图片、上一个/下一个按钮和带复选框的列表

col-md-9 类的 div 包含图形和按钮，底部的标签。

我没有在里面的任何地方指定一个固定的高度。如何使两个 div 高度相等？

更新

默认弹出窗口

最大化窗口

Answer 1

使用 bootstrap-4，对于等高列使用 row-eq-height

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="row row-eq-height">
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
            <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
          </div>

引用:http://getbootstrap.com.vn/examples/equal-height-columns/

如果您使用的是 bootstrap 3，请添加此 css

@media (min-width: 768px) {
  .row.row-eq-height{
    display: flex;
    flex-wrap: wrap;
  }
}