Columns of equal height with jQuery

Question

Can we put jQuery to use to create columns of equal height? If yes, how?

Answer 1

Update from 2022

JavaScript

jQuery is a bit overkill for something like this; you could use vanilla JavaScript:

// Construct a NodeList of all column elements
const columns = document.querySelectorAll(".column");
// Determine the tallest Node in the list based on its offsetHeight
const tallest = Math.max( ...[ ...columns ].map( c => c.offsetHeight ) );
// Apply that height to all Nodes in the NodeList
columns.forEach( column => column.style.height = `${tallest}px` );

Or (preferably) CSS

In reality, JavaScript probably shouldn't be used at all. Modern browsers have supported Flexbox for quite some time, which is capable of keeping laterally-placed elements equal in height:

Assuming the following (taken from original demo below):

<div class="container">
    <div class="column">Foo</div>
    <div class="column">Foo<br/>Foo<br/>Foo</div>
    <div class="column">Foo</div>    
</div>

Flexbox creates columns of equal-height (based on the tallest) with the following:

.container {
    display: flex;
}

---

Original Answer

Cycle through each column, and find the tallest. Then set all to that height.

var maxHeight = 0;
$(".column").each(function(){
  maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight);​

Online Demo: http://jsbin.com/afupe/2/edit

Answer 2

Highly recommend a chainable plugin approach. As this screams reusability.. You can make the equalHeights specific to the collection...

$.fn.equalHeights = function () {
  var max = 0;
  return this
    .each(function(){
      var height = $(this).height();
      max = height > max ? height : max;
    })
    .height(max);
};
// don't combine collections unless you want everything same height..
$('.top-menu a').equalHeight();
$('footer a').equalHeight();

You could take a step further and make height a property you take in so you could use for height or width like so...

$.fn.equalProp = function (prop) {
  var max = 0;
  return this
    .each(function(){
      var oProp = $(this)[prop]();
      max = oProp > max ? oProp : max;
    })
    [prop](max);
};

$('.top-menu a, .top-menu div').equalProp('height').equalProp('width');

Answer 3

I posted a similar question a few days ago and here's the piece of code that worked for me.

*** #column_left, #column_center, #column_right: are the three column divs that are supposed to have the same height. I suppose it can work with more or less number of columns.

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#column_left').height();
    r = $('#column_right').height();
    c = $('#column_center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#column_left').height(h);
    $('#column_right').height(h);
    $('#column_center').height(h);
    });
</script>

It was posted by user "widyakumara". I hope it helps you too.

Answer 4

@ktsixit you should give a class to all your columns instead of using unique IDs in this case. You can then calculate and apply the tallest height to all items at once. Even if you don't or can't use a class, you should at least use variables to store the div ID references. With the code above, you're parsing the DOM 6 times. You could at least reduce that to 3 parses by using variables.