How To Make Height Of Two Div Equal Respective To Each Other?

Question

Here I have two bootstrap panel inside class row.
And I am trying to make the height both the panel equal respective to each other even if any amount of data in placed insid

Answer 1

You can apply row-eq-height to the row class. This will make all the panels in the row equal to the tallest one.

See example: https://jsfiddle.net/m7jyh1ex/

Answer 2

It's better to use matchHeight.js in this scenario.

You are able to match any component you want.

I have matched panel-body as that's what's increasing when you add content to it. Here's a pen as well.

NOTE: As the size shrinks, this property will not be applied. Though according to me it will be unnecessary scrolling if the property is still existing. As the user will have to scroll all the blank spaces.

$(function() {
  $('.panel-body').matchHeight();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<div class="row-eq-height">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default col sec">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>

  </div>
</div><br><br>

Answer 3

Write simple JS to get max computed height and assign it to all div's. You don't need jQuery.

var panels = document.getElementsByClassName('panel-body');

var maxHeight = Array.prototype.map.call(panels, function(panel) {
    return parseInt(getComputedStyle(panel).height, 10);
  })
  .reduce(function(a, b) {
    return Math.max(a, b);
  });

for (var i = panels.length; i-- > 0;) {
  panels[i].style.height = maxHeight + 'px';
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default col">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>