0

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

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

#zeroey 导航侧边栏需要 100% 最大高度，因为它有灰色背景。在#primary 和#secondary 上方，有一个大约300 像素高的标题图像（但并不总是300 像素）。

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

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

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

目前，尽管页面加载会导致调整大小出现延迟，但它几乎可以正常工作。不过，我仍然有差距。看来脚本正在尝试计算次要 + 标题图像。上面的错误？

4

1 回答 1

0

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

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

这里发生的事情是，您将outerHeight标题图像添加到具有最大使用outerHeight的 div 中。outerHeightMath.max

但是有一些方法可以只用 CSS 来做到这一点，这对我觉得这种情况是最好的。您可以研究制作body和html拥有 100% 的身高，就像在这里找到的一样。或者您可以尝试此处找到的许多其他方法之一

于 2014-03-04T21:34:41.167 回答