CODEWITHSUNDEEP
javascriptjquerycssclass
mkoso
mkoso

Reputation: 241

Find out divs height and setting div height

I'm quite new to 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 stretched higher. I would like to make the other divs as high too even if they don't have as much content. So basically i want the script goes through the divs and check the heights and sets all of divs heights to same as the highest div has. Hopefully you understand :)

Upvotes: 13

Views: 33017

Answers (9)

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

This is simple code

var heights = $("element").map(function ()
{
    return $(this).height();
}).get(),

MaxHeight = Math.max.apply(null, heights);

or 

var highest = null;
var hi = 0;
$(".testdiv").each(function(){
var h = $(this).height();
if(h > hi){
   hi = h;
 highest = $(this);  
 }    
});

highest.css("background-color", "red");

Upvotes: 1

Ayham
Ayham

Reputation: 131

<script>
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".column"));
});
</script>

see this example

Upvotes: 9

Fireflight
Fireflight

Reputation: 3011

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(maxHeight);

Thanks SLaks!

Upvotes: 16

mkoistinen
mkoistinen

Reputation: 7773

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();
});

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816610

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);

Upvotes: 0

Jens Roland
Jens Roland

Reputation: 27770

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

Upvotes: 0

Jens Roland
Jens Roland

Reputation: 27770

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.

Upvotes: 0

SLaks
SLaks

Reputation: 887547

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.

Upvotes: 13

Alex Sexton
Alex Sexton

Reputation: 10451

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

Upvotes: 1

Related Questions