Find out divs height and setting div height

Question

Hello,

Im quite new javascript/jquery stuff, but i would like to do this kind of thing with it:

I have four divs side-by-side like this and content in each one. Now if one has more content it gets streched higher. I would like to make the other divs as high too even if they dont have as much content. So basically i want the script goes trhough the divs and check the heights and sets all of divs heights to same as the highest div has. Hopefully you understand :)

Answer 1

I believe you are looking for this plugin: equalizeBottoms by Ben Alman

Answer 2

You can use jQuery's height method to get and set the height of an element.

You need to loop through the elements, find the tallest one, then set the height of all of the elements.

var maxHeight;
$('div')
    .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
    .height(maxHeigt);

Replace 'div' with a jQuery selector that selects the elements you want to equalize.

Answer 3

Well you can get and set the height with height()

height = $('#id').height()

Loop through the elements and check the height, e.g.:

$elements = $('.container');

var max_height = 0;

for ($element in $elements) {
    if (max_height > $element.height()) max_height = $element.height();
}

$elements.height(max_height);

Answer 4

Wow - people really want to force jQuery trickery into this one -- you can do it all with CSS. From stopdesign:

When creating liquid layouts using CSS, here are a few considerations I keep in mind:

• Double-div columns: As much as I hate to use extra markup, there's no easier way to ensure maximum compatibility across multiple browsers than to use two divs for each column. The outer divs are used for setting widths. Inner divs are used to set padding to create gutters of white space between each column.

• Use fixed-width gutters (or gutter widths based on type size): When column width gets applied independently of column padding, as above, percentages can be used for widths, and pixels or ems can be used for padding. This, without worrying about one column getting bumped to the bottom of another, or without purposely under-sizing columns so they always fit on the page. Even though column widths change as the browser gets wider or narrower, the text on the page generally stays the same size. The amount of white space required to make the text feel comfortable is dependent more on the size of the type, rather than the size of the column containing that text.

• Avoid fixed-width columns: As much as possible, make all columns a percentage width. It's tempting to think of sidebars and navigation columns as being one static width, and let the main or middle column do all the expanding. This quickly destroys any proportions that may have been carefully chosen, as the fixed width columns can look puny and weak at large resolutions. Or wide fixed-width sidebars can become daunting, over-powering the main column at narrower browser widths.

The trick is to create an ultra-wide background image (or two images for 3-column layouts, thus the Sliding-Doors-nature of the technique). The image is partially opaque, and partially transparent. It gets tiled vertically inside the parent container, just like Dan's Faux Columns technique. The opaque portion of the image should match percentages of the column it helps create, so that it can be positioned with an identical background-position value. This allows the transition from opaque to transparent to become the axis point for the background's position. The opaque portion's position within the image could be altered based on order of content within the HTML to produce almost any effect desired.

Answer 5

Of course, if all you want is to fix the equal-height issue, what you want is the One True Layout:

http://fu2k.org/alex/css/onetruelayout/example/interactive

Answer 6

I was getting a NaN error with SLaks code. Giving maxHeight an initial value of 0 did the trick.

var maxHeight = 0;
$('div')
  .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
  .height(maxHeigt);

Thanks SLaks!

Answer 7

This is straight out of the jQuery documentation pages:

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