Height matching in 4 JS lines

matching heights by running a function on the parent

by Victor

HTML

<div class="stage">
    <!-- The bigCol represents the tallest child. -->
    <div class="col bigCol">Al</div>
    <div class="col">Tim</div>
    <div class="col">Heidi</div>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.stage {
    width:100%;
    height:400px;
    background:#2C3E50;
}
.col {
    width:31%;
    margin:1%;
    float:left;
    background: white;
    padding:10px;
    text-align: center;
    font-weight:bolder;
    text-transform: ;
}
.bigCol {
    height:350px;
}

JavaScript

(function( $ ){
   $.fn.matchHeight = function()
   {
       //get the children as a var
       var children = $(this).children('div');
       // blank array for our heights
       var heightArray = [];
       //build the array of heights
       children.each(function(){ heightArray.push( $(this).outerHeight() ) });
       //animate to the max
       children.animate({height: Math.max.apply( Math, heightArray )+ "px"}, 1100);
       
       // Just in case you need the parent .
       // return this
   }; 
})( jQuery );

$('.stage').matchHeight();