Make Multiple Elements The Same Height As The Tallest One With JQuery

Posted by Weston Ganger


<div class="row parent">
  <div class="col-sm-4 same-height">
    ... lots of content...
  </div>
  <div class="col-sm-4 same-height">
    ... less content ...
  </div>
  <div class="col-sm-4 same-height">
    ... less content ...
  </div>
</div>

var parent = $(".parent");
if(parent.length !== 0){
  parent.each(function(){
    var tallestHeight = 0;
    var sameHeightChildren = $(this).find(".same-height");
    sameHeightChildren.each(function(){
      var thisHeight = $(this).height();
      if(thisHeight > tallestHeight){
        tallestHeight = thisHeight;
      }
    });
    sameHeightChildren.height(tallestHeight);
  });
}


Related External Links:

Article Topic:Software Development - Javascript

Date:April 13, 2015

Recommended Posts