对侧栏高度使用javascript IF语句

Question

我有一个由三列组成的网站：

1-#zerey是左侧导航侧边栏2-#主要内容3-#次要是右侧边栏

#zeroy导航侧边栏需要100%的最大高度，因为它有灰色背景。在#primary和#secondary之上，有一个大约300px高的头图像(但并不总是300px)。

我所做的是创建一个脚本，将标题图像的外高和#primary相加，然后调整#zeroy的大小以匹配该高度，从而使其显示为全高。但是，如果#次要侧边栏大于主要内容，则页面底部会出现空白。

我正在测试一个脚本，它基本上说："这是主要的高度，这是次要的高度。如果主要的高于次要的，那么启动脚本，但如果次要的高于主要的，则启动一个稍微不同的脚本，使用次要+标题图像。

该网站目前在我的开发服务器上-http://deset.me/avenir/

这是我的尝试：

jQuery(window).load(function(){
var a = jQuery("#primary").outerHeight();
var b = jQuery("#secondary").outerHeight();
if(a > b) {
jQuery("#zeroey").height( jQuery("#page-header-img").outerHeight() + jQuery("#primary").outerHeight()  );
}
else if (a == b) {
jQuery("#zeroey").height( jQuery("#page-header-img").outerHeight() + jQuery("#primary").outerHeight()  );   
}
else {
jQuery("#zeroey").height( jQuery("#page-header-img").outerHeight() + jQuery("#secondary").outerHeight()  );
}
});

目前，虽然页面加载会导致调整大小的延迟，但它运行得很好。不过我还是有差距。脚本似乎正在尝试计算第二个+标头映像。上面的错误？

Answer 1

您的代码似乎没有什么问题，尽管可以像这样更有效地完成：

jQuery(window).load(function(){
jQuery("#zeroey").height(jQuery("#page-header-img").outerHeight()+Math.max(jQuery("#secondary").outerHeight(), jQuery("#primary").outerHeight()));
});

这里发生的是，使用Math.max将头图像的outerHeight添加到具有最大outerHeight的div的outerHeight。

但我觉得有一些方法可以用CSS来实现这一点，这对这种情况来说是最好的。你可以考虑制作高度为100%的body和html。或者你可以尝试在这里找到的许多其他方法之一