Javascript

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

Posted by Weston Ganger on April 13, 2015


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


Posted in Javascript and Tagged with javascript jquery same-height 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts