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

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

1 个答案:

CODEPEN