Making right column same height as left column

Question

How do I make the right column the same height (dynamically) as the left one?

For example:

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

It works fine in my pc – Luis felipe De jesus Munoz Jan 11 '18 at 23:43 — Luis felipe De jesus Munoz, Jan 11 '18 at 23:43

score 1 · Accepted Answer · answered Jan 12 '18 at 01:38

Assuming you are using Bootstrap 3: You can assign display: flex; to the container div and erase height: 100% from the right div. flex will adjust the heights of both elements to be equal by default.

Here's that solution in a codepen: https://codepen.io/anon/pen/qpYyOM

Note: I assigned a class (.x) to the container to assign display: flex;

score 0 · Answer 2 · answered Jan 12 '18 at 00:16

If your goal is to fill the space with the background color, despite the right column not having content down as far, then you have several options.

My instinct would be to create a wrapper div that encompasses both and sets the background-color to your desired value. If you don't want that background in the left column, set it not to inherit.

Check out this answered question that is basically the same:

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

Making right column same height as left column

2 Answers2