web dev & more!

jQuery code to set 2 elements to same height

Published: March 27, 2014

This is a little chunk of jQuery written to set a couple elements to equal heights. It has to take into consideration, the padding on the two elements. The two elements being set to equal heights are entry-content and sidebar_images.

$(window).load(function() {

  var finalleft = $('.entry-content').height();
  var finalright = $('.entry-content').height();
  var padleft = parseInt($('.entry-content').css('paddingTop')) + parseInt($('.entry-content').css('paddingBottom'));
  var padright = parseInt($('.sidebar_images').css('paddingTop')) + parseInt($('.sidebar_images').css('paddingBottom'));

  if($('.sidebar_images').height() < $('.entry-content').height()){
    var padtot = padleft - padright;
    $('.sidebar_images').height(finalleft+ padtot);
  }
  else {
    var padtot = padright - padleft;
    $('.entry-content').height(finalright + padtot);
  }

});