Using javascript IF statements for side bar heights

Question

I've got a site that comprises of three columns:

1 - #zeroey is the left navigation sidebar 2 - #primary is the main content 3 - #secondary is the right sidebar

The #zeroey nav sidebar needs to be 100% max height as it has a grey background. Above #primary and #secondary, there is a header image which is around 300px high (but not always 300px).

What I have done is created a script that adds up the outerheight of the header image and #primary, then resize #zeroey to match that height which makes it appear full height. However, if the #secondary sidebar is larger than the primary content, gaps appear at the bottom of the page.

I'm testing out a script that basically says, "Here's the height of primary, and here's the height of secondary. If Primary is higher than Secondary, then fire off the script, but if secondary is higher than primary, fire off a slightly different script that uses secondary + header image instead.

The site is currently on my development server here - http://deset.me/avenir/

Heres my attempt:

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()  );
}
});

Currently, it works almsot fine although the page load causes a delay in the resizing. I'm still getting gaps though. It appears the script is trying to calculate secondary + header image. Errors in the above?

Answer 1

Nothing appears to be wrong with your code, although it could be done more efficiently like so:

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

What's happening here is that you're adding the outerHeight of the header image to the the outerHeight of whichever div has the maximum outerHeight using Math.max.

But there are ways to do this with just CSS which would be best for this situation I feel. You can look into making body and html having height 100% like found here. Or you can try one of many other ways found here