jquery根据另一个div的高度动态调整div的大小

Question

我有一个div，最初设置为display：none，并使用.slideDown变得可见。它通过ajax加载一个表。 由于slideDown，包含div的高度增加。我想要其他两个div的高度同时增加。

Answer 1

如果你想要三个div的高度相同，一个CSS类添加三个div的像“同时”，经过了slideDown运行下面的代码

var maxHeight = 0; 

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

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

Answer 2

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

中选择元素，像这样：

$(".slideDown") 

获取CSS属性是这样的：

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

设置CSS属性是这样的：

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

如果您遇到问题，阅读docs，我的代码示例中可能存在错误，我没有测试它们。

Answer 3

你想其他的div高度增加以匹配不断增长的股利？或以其他方式回应？

如果你正在寻找与之相匹配的，你的函数可能是这样的：

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

您可以将表加载后调用它。您还可以设置这样的活动：

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

等

希望这有助于。