将div高度匹配到其他div的组合高度

Question

我正在尝试将背景div的高度与前面的div的组合高度匹配。 我使用了简单的jQuery height函数，它的工作原理是：

var originalHeight = $("#topbg").height() + $("#menurowbg").height() + $("#headerbg").height() + $("#contentareabg").height() + $("#footerbg").height();
$("#wrapper").height(originalHeight);

问题是，如果调整这些div之一的大小以保持匹配，则高度需要动态变化。 我尝试放置setTimeout函数，但是失败了。 我显然缺少了一些东西，但无法弄清楚。 请帮助这个jQuery新秀。 这是我当前的代码：

var originalHeight = $("#topbg").height() + $("#menurowbg").height() + $("#headerbg").height() + $("#contentareabg").height() + $("#footerbg").height();

setTimeout function checkHeight() {
if(originalHeight < ($("#topbg").height() + $("#menurowbg").height() + $("#headerbg").height() + $("#contentareabg").height() + $("#footerbg").height())) 
{
originalHeight = $("#topbg").height() + $("#menurowbg").height() + $("#headerbg").height() + $ ("#contentareabg").height() + $("#footerbg").height();
}
}, 500);

$("#wrapper").height(originalHeight);

Answer 1

有以下三种情况：

1）使用setInterval()而不是setTimeout()执行X毫秒的代码：

setInterval(function() {
    setContainerSize();
}, 1000);

示例： http ： //jsfiddle.net/XWmdL/3/

2）包含div是要调整大小的div的父级。 在这种情况下，您不必将所有高度加在一起就可以重置容器的高度。 您可以将容器的width和height属性设置为auto ：

#container {
    width: auto;
    height: auto;
}

示例： http ： //jsfiddle.net/XWmdL/1/

3）如果在窗口大小更改时正在调整子div的大小，则需要使用$(window).resize()事件。 在以下示例中，更改查看窗口的大小，您将看到红色背景的大小随着黄色div的改变而改变。

示例： http ： //jsfiddle.net/XWmdL/2/

希望这可以帮助！

Answer 2

首先条件是错误的

 setTimeout function checkHeight() {
if(originalHeight < (jQuery("#topbg").height() + jQuery("#menurowbg").height() +      jQuery("#headerbg").height() + jQuery("#contentareabg").height() + jQuery("#footerbg").height())) {

originalHeight = jQuery("#topbg").height() + jQuery("#menurowbg").height() + jQuery("#headerbg").height() + jQuery("#contentareabg").height()+jQuery("#footerbg").height();

jQuery("#wrapper").height(originalHeight);

}, 500);