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

Question

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

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 的父级。在这种情况下，您不必将所有高度相加并重置容器的高度。您可以将容器的宽度和高度属性设置为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);