'jQuery column equal height issue

I'm trying to display two divs with the height set to a 3rd of the body width and match these height if the divs require more space to match one another. like equal height columns.

Here is what I have so far:

var width = $('body').width();
var thirtyheight = width /10*3
$('.thirtyheight').css('height',thirtyheight);

This gets the width and sets as height perfectly, I've tried using equal height snippets with this but nothing yet has worked.

jquerycss


Solution 1:[1]

check this

$('.thirtyheight').css({'height',thirtyheight+'px'});

Solution 2:[2]

First calculate 1/3 of the body height and save it in a variable. Then go trough each column and check if it is higher then the calculated height, if yes override the variable saved before. Something like this:

var c = $("body").height() / 100 * 33.33;
$(".thirtyheight").each(function(index, el) {
    if ($(el).height() > c) { c = $(el).height(); }
}).height(c);

Working fiddle: http://jsfiddle.net/3JdYj/

Solution 3:[3]

Figured it out, I've decided to get the parent height to resize the child divs, Works a treat.

var colHeight = $(".parent").height();
$('.child').css('min-height',colHeight);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sangram parmar
Solution 2 Matthijs
Solution 3 Delete

Related Questions