Использование JavaScript IF-операторов для высоты боковой панели

Question

У меня есть сайт, который состоит из трех столбцов:

1 - #zeroey - левая боковая панель навигации 2 - #primary - основное содержимое 3 - #secondary - правая боковая панель

Боковая панель #zeroey nav должна иметь максимальную высоту 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()  );
}
});

В настоящее время все работает нормально, хотя загрузка страницы вызывает задержку при изменении размера. Я все еще получаю пробелы, хотя. Похоже, скрипт пытается вычислить вторичный + заголовок изображения. Ошибки в вышесказанном?

Answer 1

Похоже, что с вашим кодом все в порядке, хотя это можно сделать более эффективно, например:

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

Здесь происходит то, что вы добавляете outerHeight изображения заголовка к outerHeight из того, что Div имеет максимум outerHeight с помощью Math.max,

Но есть способы сделать это только с помощью CSS, который лучше всего подходит для этой ситуации. Вы можете посмотреть в создании body а также html имея высоту 100%, как найдено здесь. Или вы можете попробовать один из многих других способов, найденных здесь