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包含图片，prev / next按钮和带复选框的列表

类 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;
  }
}

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;。

希望这能让你开始朝着正确的方向前进。

如果您需要其他策略，请与我们联系。

Answer 4

我的最终加价是

<div id="graphsWindow" >
<div class="table" style="height:90%">
    <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; 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>

这正是我所需要的，但当窗口未最大化时，两个div再次具有不同的高度。

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

更新

4 个答案: