Equal column height with jQuery

index.html

<div class="container">
  <h1>Equal column height with jQuery</h1>
  <p>Float-based columns with equal height. The height of all the columns is determined by the highest column via jQuery. Each column height is dividable by 28px, so it will fit the underlying (28px based) grid nicely.</p>
  <p>Happy coincidence: a plugin with a similar title was released today on jQuery plugin registry - <a href="http://plugins.jquery.com/equalheightcols/">jQuery equal height columns plugin</a>. It sounds similar but it does the <a href="http://aamirafridi.com/jquery/jquery-equal-columns-height-plugin">opposite</a> - i.e. it shortens all the columns to a predifined height.</p>
  <button id="toggle">Toggle javascript</button>
  <button id="toggle-grid">Toggle grid</button>
</div>

<div class="container" id="container">  
  <section class="site-section brown">
    <h2>Title 1</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  
  </section>
  <section class="site-section blue">
    <h2>Title 2</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>
  </section>
  <section class="site-section red">
    <h2>Title 3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>  
  </section>

</div>

script.js

$(function(){
  var grid = 28;
  
  // Function to get the Max value in Array
  Array.max = function( array ){
    return Math.max.apply( Math, array );
  };
  
  // Function to find and set the Max height to all columns
  function calc_heights(){
    var heights = new Array();
    $('.site-section').each(function(index){
      heights.push($(this).height());
    });
    var height = Array.max(heights), 
        diff = height % grid; 
    $('.site-section').height(height + diff);
  }
  calc_heights();
  
  // toggle buttons
  var container = $("#container");
  var body = $("body");
  $("#toggle").click(function(){
    container.toggleClass("no-js");
  });
  $("#toggle-grid").click(function(){
    body.toggleClass("no-bg");
  });
  
  
});

style.scss

@import "compass";
$base: 7px;
$grid: $base * 4;
$brown: #ede2d4;
$blue: #e4f4f4;
$red: #f1e2dc;
$grid-color: rgba($blue, 0.4); 
$baseline: rgba($blue, 0.2); 

* {
  @include box-sizing(border-box);
}
body {    
  @include background(  
    linear-gradient(
      top, transparent, 
      transparent $base - 1, $baseline $base, transparent $base, 
      transparent $base * 2 - 1, $baseline $base * 2, transparent $base * 2, 
      transparent $base * 3 - 1, $baseline $base * 3, transparent $base * 3, 
      transparent $grid - 1, $grid-color $grid
    ), 
    linear-gradient(left, transparent,  transparent $grid - 1, $grid-color $grid)
  );  
  background-size: $grid $grid;
  font-size: $base * 2;
  line-height: $base * 3; 
}
.no-bg {
  background: none;
}
.container { 
  overflow: hidden;
  width: $grid * 29; 
  margin: $grid;
}
.site-section{
  float: left; 
  min-height: $grid * 6;
  .no-js & { /* toggle javascript */
    height: auto !important;
  }
  width: $grid * 9;
  padding: 0 $grid;
  margin-left: $grid;
  &:first-child {
    margin-left: 0;
  }
}
.brown { 
  background: $brown;
  h2 {
    background: darken($brown,40%);
  }
}
.red {
  background: $red;
  h2 {
    background: darken($red,40%);
  }
}
.blue {
  background: $blue;
  h2 {
    background: darken($blue,40%); 
  }
}

h1 {
  font-size: 2em;
  line-height: 1; 
  margin: 0 0 $base;
}
h2 {
  color: #fff;
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 -1*$grid $base*2;
  padding: $base $grid;
}
button {
  height: $base * 3;
}
p {
  margin: 0 0 $base * 2;
}