Jquery dynamically resize div based on height of a

问题:

I have a div that is initially set to display:none, and uses .slideDown to become visible. It loads a table via ajax. Due to the slideDown, the height of the containing div increases. I want the height of two other divs to increase simultaneously.

回答1:

If you want same height for the three divs; Add a css class to three divs like "simultaneously", after slidedown run the below code

var maxHeight = 0;

$('div.simultaneously').each(function(index){
if ($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});

$('div.simultaneously').height(maxHeight);

回答2:

$(document).ready(function(){
 //Put your code in here, it will run when the page loads
});

Select elements like this:

$(".slideDown")

Get CSS properties like this:

var height = $(".slideDown").css("height");

Set CSS properties like this:

$("#someElement").css("background-color", "#fff");

If you get stuck, read the docs, there might be mistakes in my code examples, I haven't tested them.

回答3:

Do you want the other divs heights to increase to MATCH the div that's growing? Or to respond to it in some other way?

If you're looking to match it, your function might look like this:

function matchHeight() {
    var newHeight = $("#grownDiv").height(); //where #grownDiv is what's growing
    $(".matchDiv").height(newHeight);    //where .matchDiv is the class of the other two
}

You can call this after your table loads. You can also set events like this:

jQuery.event.add(window,"load",matchHeight);
jQuery.event.add(window,"resize",matchHeight);

etc.

Hope this helps.