Html 使右栏与左栏高度相同

如何使右列的高度（动态）与左列的高度相同

例如：

帕特里夏·布莱特
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数ac ante lacinia，tristique eros ut，posuere diam。不要在任何时候都放弃自己的权利。但是坐在那里的是一位显贵，卢克图斯·奥古斯·内克，乌拉姆科珀·利伯。
试验

如果您的目标是用背景色填充空间，尽管右栏没有足够的内容，那么您有几个选项

我的直觉是创建一个包装器div，它包含这两个元素，并将背景颜色设置为所需的值。如果不希望在左列中显示该背景，请将其设置为“不继承”

看看这个基本相同的问题：

---

假设您使用的是Bootstrap 3：您可以分配

display:flex到容器div，并从右侧div中删除
高度：100%
。默认情况下，flex会将两个元素的高度调整为相等

以下是代码笔中的解决方案：

注意：我为容器分配了一个类（
.x
），以分配
显示：flex
它在我的电脑中运行良好
<div class="row" style="margin-bottom: 5em;">
  <div class="col-sm-6" id="left-photos">
    <div class="container-fluid row row-eq-height">
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
    </div>
    <div class="container-fluid row row-eq-height" style="padding-top: 1em">
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
      <div class="col-sm-4 col-md-4" style="width: 33%">
        <img src="https://avatarfiles.alphacoders.com/893/thumb-89303.gif" class="img-responsive">
      </div>
    </div>
  </div>
  <div class="col-sm-6" style="margin-top: -1em; background: #F0F0F0; height: 100%">
    <div style="padding-left: 1.5em">
      <div class="row">
        <div style="padding-bottom: 0.5em">
          <h3>Patricia Bright</h3>
        </div>
        <div class="col-sm-6">
          <div class="fluid-media" style="margin-left: -1em">
            <iframe src="https://www.youtube.com/embed/I3MxH3OY19g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
          </div>
        </div>
        <div class="col-sm-6">
          <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac ante lacinia, tristique eros ut, posuere diam. Donec quis nunc vel dolor ultricies aliquam vel et augue. Ut sit amet nisl dignissim, luctus augue nec, ullamcorper libero.</small>
        </div>
      </div>
      <div class="row" style="padding-top: 1em; padding-bottom: 1em">
        Test
      </div>
    </div>
  </div>
</div>