如何创建相同高度的Bootstrap列（左侧的高度）

Question

我已经检查了有关此主题的几个答案，但它们要么没有响应，要么对我不起作用。

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

Answer 1

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

HTML：

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

CSS：

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

JS：

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

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

CODEPEN