做两个并排的等高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>

​

类为-md-2的div包含图片、prev/next按钮和带有复选框的列表。

带有类的div --md-9包含图形和按钮、底部的标签.

我没有指定一个固定的高度，任何地方在里面。我怎样才能把两个等高的磁极做成呢？

更新

默认弹出窗口

​

​

最大化窗口

​

​

Answer 1

对于引导-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/

如果使用引导程序3，则添加此css。

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

Answer 2

我使用jquery，希望能帮助您：

$(document).ready(function(){
  var col9Height = $('.col-md-9').height();
  $('.col-md-2').height(col9Height);
})

Answer 3

有无数种方法可以得到这个。

height:100%通常不会做很多事情。

因为您没有任何其他div(如导航或页脚)

你可以用：

每个min-height: 50vh;

您需要使用它，但我会删除高度: 100%无处不在，并在每个行div中添加一个min-height: 50vh;。

希望这能让你从正确的方向开始。

如果你需要别的策略，告诉我。