Skip to content

Instantly share code, notes, and snippets.

@imjakechapman
Created May 1, 2014 20:52
Show Gist options
  • Select an option

  • Save imjakechapman/6a9aa2ee1af0d9fcba24 to your computer and use it in GitHub Desktop.

Select an option

Save imjakechapman/6a9aa2ee1af0d9fcba24 to your computer and use it in GitHub Desktop.
Match Element heights within a container element
// Function to make heights of elements
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
var el = $(this).find('.element-you-want-to-check-height-on'),
h = el.outerHeight();
if (h > currentTallest) { currentTallest = h; }
});
if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
$(this).children().find(el).css({'min-height': currentTallest});
});
return this;
};
// Usage
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
$('.parent').equalHeights(); // each .child element will be the same height
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment