javascript - DIV要素の高さを自動的に設定する方法

Question

複数のdiv要素の配置に問題があります。高さの異なる3つのdiv要素が連続してあります。ただし、「div 1」はスライドダウンメニューなので、「div1」の高さが変わります。知りたいのですが、3つのdiv要素すべての高さを自動的に同じに設定するにはどうすればよいですか。

Answer 1

この jQuery プラグインは、セット内の各要素の高さを最も高い要素の高さに設定します。

// 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;
};

次のように使用します。

$("myDivs").sizeToTallest();

Answer 2

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

Answer 3

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


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

each 関数は div を反復し、高さを次のように設定します50px

Answer 4

1 つの div のスライドダウンのコールバック関数のように聞こえますが、次のことを行う必要があります。

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

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