Question

我有一个包含三列的网站：

1 - #zeroey是左侧导航侧边栏 2 - #primary是主要内容 3 - #secondary是右侧边栏

#zeroey nav侧边栏需要100％最大高度，因为它有灰色背景。在#primary和#secondary之上，有一个标题图像，大约300px（但不总是300px）。

我所做的是创建了一个脚本，它将标题图像和#primary的外部高度相加，然后调整#zeroey的大小以匹配使其显示为全高的高度。但是，如果#secondary侧边栏大于主要内容，则会在页面底部显示间隙。

我正在测试一个脚本，基本上说，“这是主要的高度，这是次要的高度。如果Primary高于Secondary，则关闭脚本，但如果secondary高于primary，则触发关闭使用辅助+标题图像的略有不同的脚本。

该网站目前位于我的开发服务器上 - 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()));
});

这里发生的事情是，您将标题图片的outerHeight添加到使用outerHeight的最大outerHeight div的Math.max。

但是有一些方法可以用CSS做到这一点，这对我觉得这种情况最好。您可以考虑将body和html设置为高度100％，如found here。或者您可以尝试许多其他方式之一found here

使用javascript IF语句进行侧栏高度

1 个答案: