CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1784025
user1784025

Reputation: 195

How to automatically set the height of DIV elements

I'm having a problem with positioning multiple div elements. I have three div elements in a row with different heights. But in "div 1" is slide-down menu, so the height of "div 1" changes. I want to know, how can I automaticly set the height of all three div elements to be the same.

Upvotes: 0

Views: 110

Answers (4)

adeneo
adeneo

Reputation: 318162

$('#div1').slideDown(400, function() {
    $('#div2, #div3').height($(this).height());
});

Upvotes: 0

Bruno Vieira
Bruno Vieira

Reputation: 3904

$height = "50px"; // or whatever height you wish


 $("div").each(function(e)
 {
    $(this).css("height",$height);
 });

The each function will iterate your divs and then set their heights to 50px

Upvotes: 0

Carl Raymond
Carl Raymond

Reputation: 4479

This jQuery plugin will set the height of each element in a set to the height of the tallest one:

// Sets the height of a set to the height of the tallest member.
$.fn.sizeToTallest = function () {
    var tallest = 0;
    this.each(function () {
        var h = $(this).height();
        if (h > tallest) tallest = h;
    });
    this.height(tallest);
    return this;
};

Use it like this:

$("myDivs").sizeToTallest();

Upvotes: 1

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66921

Sounds like on the callback function for the slide-down of the one div, you just need to:

// grab the new hight
var newHeight = $(this).outerHeight();

// set it to the other two divs
$('.otherDivs').height(newHeight);

Upvotes: 0

Related Questions