Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Equal Height Divs

If i have the following markup;

<div id="container">
  <div id="box">
    <div id='sameHeight'>One<br>two<br>three</div>
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>five</div>        
  <div>
  <div id="box">
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>six</div>
    <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

How can I ensure that all divs marked as "sameHeight" are the same height as their counterparts in the other div?

I had a look at the equalHeights plugin but that assumes all divs side by side are in the same parent. I need one that can either traverse parents or allow me to specify parents.

Is there such a thing or do I need to write it?

EDIT

I seem to have caused some confusion in my explanation so I hope this clears things up a little.

Looking at the new markup, the container is a simple box.

The "box" divs sit side by side.

Each sameheight div then sits one under the other within its parent.

The thing i'm trying to solve is to have each of the sameHeights that match to it's opposite side the same height.

it should look like a grid i guess w/out using a grid.

I hope this helps.

EDIT 2

This is so far what I have come up with but is there a better way?

function SetHeights() {
    var numLines = $('#container>div:eq(0) .sameHeight').length;

    for (var t = 0; t < numLines; t++) {
        var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight();
        var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight();

        if (leftHeight > rightHeight) {
            $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight });
        }
        else {
            $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });
        }
    }
}
like image 748
griegs Avatar asked Apr 12 '10 04:04

griegs


People also ask

How do I keep my divs the same height?

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other.

How do you make two divs the same height side by side?

Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.

How do I set dynamic height in jQuery?

Answer: Use the JavaScript height() method You can set the height of a <div> box dynamically using the jQuery height() method.

How can get current Div height in jQuery?

jQuery height() Method The height() method sets or returns the height of the selected elements. When this method is used to return height, it returns the height of the FIRST matched element. When this method is used to set height, it sets the height of ALL matched elements.


1 Answers

Firstly, you are probably aware only one element should have any one id attribute. So I have changed the selectors as if they were classes to classes below. Even though you may not give a care about W3C standards, browsers or JavaScript API, etc may rely on this behaviour and not work now or in the future.

   $(document).ready(function () {    
        $('div.parentDiv > div').each(function() {

        var $sameHeightChildren = $(this).find('.sameHeight');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });


    });
});

Note: If you want them all to be the same height despite their parent div, this is what you want.

$(document).ready(function () {    
        var $sameHeightDivs = $('.sameHeight');
        var maxHeight = 0;
        $sameHeightDivs.each(function() {

            maxHeight = Math.max(maxHeight, $(this).outerHeight());

        });

        $sameHeightDivs.css({ height: maxHeight + 'px' });
});

This will set them to all be the height of the tallest, per parent div element.

Also, this answer may show you some other options.

Note too that if the content inside changes again (perhaps via JavaScript), you will need to call this again, or put it in a setInterval() which I do not recommend.

like image 154
alex Avatar answered Sep 19 '22 14:09

alex