Css 如何创建相同高度（左侧高度）的引导列

我已经检查了几个关于这个话题的答案，但它们要么没有反应，要么就是不适合我

---

我有两列，我希望右边的一列始终与左边的一列高度相匹配。如果右栏中的内容过多，请使其可滚动。这可能吗？

我有一个例子（使用表格布局）：

HTML:

JS:

<div class="row no-gutter">
  <div class="row-same-height">
    <div class="col-xs-6 col-xs-height">
      <div class="content-left">
        <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" class="img-responsive">
      </div>
    </div>
    <div class="col-xs-6 col-xs-height col-top">
      <div class="content-right">
        <div class="content-box">
          <h2>Responsive two sections (equal height)</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </div>
    </div>
  </div>
</div>

.no-gutter.row {
  margin-left: 0;
  margin-right: 0;
}
.no-gutter > [class*="col-"],
.no-gutter .row-same-height > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
@media (min-width: 992px) {
  .no-gutter-desktop.row {
    margin-left: 0;
    margin-right: 0;
  }
  .no-gutter-desktop > [class*="col-"],
  .no-gutter .row-same-height > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
.inside {
  margin-top: 20px;
  margin-bottom: 20px;
  background: #ededed;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #ededed));
  background: -moz-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
  background: -ms-linear-gradient(top, #f4f4f4 0%, #ededed 100%);
}
.inside-full-height {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}
.content {
  padding: 12px 3px;
}
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}

@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
[class*="col-"] {
  background: #d6ec94;
}
.content-right {
  overflow-y: auto;
}

var leftHeight = $('.content-left').height();
$('.right').css('max-height', leftHeight);

$(window).resize(function () {
  var leftHeight = $('.content-left').height();
  $('.content-right').css('max-height', leftHeight);
});