Set a DIV height equal with of another DIV

Posted at July 23, 2010 // JavaScript

If you’re a looking for a method the make sidebar height be the same all the time with the content then you are in the right place. I’ve been looking for a solution for a while and instead I’ve got, along the way, 5 possible ways to accomplish this. To be honest, I’ve used only one of these but you might like to try it all and see which one is working the best for you to get the job done.

Four of these methods are using jQuery and the last one is using CSS. Basically this situation is more about styling the page so it should be using CSS and not jQuery but since these methods exists and are used on a large scale by front end web developer let’s take a look at them. If you know even more methods drop a line here, we will love to hear what you’re saying.

The first method is based on a built-in jQuery function, height, which is referring to the height of the element which is applied on, and the css function which is adding the style we want to defined on this selected element. This being said, what we have here can be translate like this: select the class sidebar and apply on it the height from the content. Height function is taking only the number of pixels so you’ll have to add ‘px’ as measurement units.

$(".sidebar").css({'height':($(".content").height()+'px'});

The second method is pretty straight forward and is more simplified.

$(".sidebar").height($(".content").height());

The following is based on creating a JavaScript variable for which one is assigned the value of the highest column. Later on we can use this variable to define the height for any DIV we want, in our case is being used to define the sidebar height .

var highestCol = Math.max($('.sidebar').height(),$('.content').height());
$('.sidebar').height(highestCol);

The last jQuery method is pretty similar with the previous one but a little more complex based on the fact that we’re defining a function, who’s being used letter on, within our call.

$.fn.equalizeHeights = function(){
  return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('.sidebar, .content').equalizeHeights();

The last method, and which seams to be more appropriate for our situation is based on defining a background image for wrapper of the .content and .sidebar, so will give the user the impression that the sidebar has the same height as the content. Add a repeat-y on this background and you’re done. So far this CSS method is the easiest one and is not requiring any web programming knowledge.

Update. Nov 29th, 2011.
Just found a much easier way to have the columns all equal:

var max_height = 0;
$("div.col").each(function () {
    var col_height = $(this).height();
    if (col_height > max_height) {
        max_height = col_height;
    }
});
$("div.col").height(max_height);

Thanks to Stefan from PSD to MODx for the tip.

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

14 Comments

Leave Comment