Question

如何使右列与左侧列相同（动态）？

例如：

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

Answer 1

假设您正在使用Bootstrap 3：您可以将display: flex;分配给容器div并从右侧div中删除height: 100%。 flex会默认将两个元素的高度调整为相等。

以下是codepen中的解决方案：https://codepen.io/anon/pen/qpYyOM

注意：我已将一个类（.x）分配给容器以指定display: flex;

Answer 2

如果您的目标是使用背景颜色填充空间，尽管右栏没有内容，但您有多种选择。

我的直觉是创建一个包装器div，它包含两者并将背景颜色设置为您想要的值。如果您不想在左栏中显示该背景，请将其设置为不继承。

查看这个基本相同的答案：

How to make a div 100% height of the browser window?

使右列与左列的高度相同

2 个答案: