CODEWITHSUNDEEP
jquery
Jordan
Jordan

Reputation: 938

Responsive equal height divs

I have four side-by-side divs containing approximately the same amount of text, but some browsers render the text slightly differently so as to make some of the divs taller/shorter than the others.

I know there are jQuery plugins that let you set a number of divs to be the same height as the highest one, but my website is responsive, and the height of the divs changes for the tablet and mobile 'versions' of the responsive site.

Is there a way to set these four divs so that they are all the height of the tallest one, and as the browser is resized to trigger the layout to switch to the tablet or mobile version, the divs will be able to adjust their size accordingly, and once again all be made to be equal in height to the tallest of the divs?

Upvotes: 0

Views: 539

Answers (2)

r043v
r043v

Reputation: 1869

ok, here is a second solution, but it's assume the bigger div is always the same :- )

var biggerDiv = $();
var maxHeight = 0;

$my4div.each(function()
{   var $t = $(this);
    var h = $t.height();
    if(h > maxHeight)
    {   maxHeight = h;
        $biggerDiv = $t;
    }
}).not($biggerDiv).height(maxHeight);

$(window).on("resize",function()
{   $my4div.not($biggerDiv).height($biggerDiv.height());
});

Upvotes: 0

r043v
r043v

Reputation: 1869

function resizeMy4Div(){
    var maxHeight = 0;
    $my4div.css("height","auto").each(function()
    {   var h = $(this).height();
        if(h > maxHeight) maxHeight = h;
    }).height(maxHeight);
}

$(window).on("resize",resizeMy4Div);
resizeMy4Div();

Upvotes: 1

Related Questions