Сделать функцию равной высоты изменяемой при изменении размера окна

почему бы просто не добавить прослушиватель событий к событию изменения размера окна, которое пересчитывает высоту элементов?

однако, поскольку вы уже установили фиксированную высоту для элементов, вам необходимо сбросить высоту обоих элементов, чтобы получить новый максимальный размер.

попробуйте добавить:

$(window).resize(function(){
    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();
});

работа в фаерфоксе. что это в основном делает при каждом изменении размера окна:

1. сбросить высоту элементов, что означает, что браузер будет вычислять ее на основе содержимого
2. снова выполните вашу функцию, чтобы сделать оба элемента одинаковой высоты

Лично я бы решил эту проблему, вообще не прибегая к JavaScript. Если вы хотите добавить немного больше HTML, вы можете добиться желаемого визуального эффекта с помощью одного лишь CSS.

Вот JSFiddle: http://jsfiddle.net/Z59eT/2/

Базовая стратегия:

1. Добавьте элемент с clear:both в конец group модулей --- это позволяет высоте группы быть равной большему из двух модулей.
2. Дайте div группы и модуля position:relative, чтобы они участвовали в позиционировании.
3. Добавьте специальные фоновые элементы перед каждым модулем --- эти элементы будут увеличиваться вертикально, чтобы соответствовать размеру группы, реализуя желаемые цвета столбцов.

Я уверен, что есть другие способы решения этой проблемы на чистом CSS. Это просто первое, что пришло в голову. Ваши реальные требования могут потребовать чего-то более тонкого.

По возможности лучше позволить браузеру сделать всю работу. В этом случае вместо того, чтобы вычислять высоту, лучше позволить браузеру справиться с этим, если вы можете, поскольку собственные возможности браузера будут работать на порядки быстрее, чем интерпретируемый код JS.

Я просто должен был сделать это сам. Я использовал функцию setEqualHeight в прошлом, но меня «попросили» заставить ее работать, когда кто-то изменяет размер окна как сумасшедший.

Исправление комнаты 13 является ключевым. В противном случае он просто использует старую заданную высоту. Вы, очевидно, вызываете ту же функцию в DOM ready. Я добавляю функцию задержки для изменения размера окна, поэтому вы вызываете ее только тогда, когда закончите, а не постоянно.

jQuery:

function setEqualHeight(columns) {
    var tallestcolumn = 0;
    columns.each(
    function() {
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
            }
        }
    );
 columns.height(tallestcolumn);
}

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        $('.yourSelector').css('height','auto'); //solve for all you browser stretchers out there!
        setEqualHeight($('.yourSelector'));
    }, 500);
});

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

$.fn.equalHeight = function() {
    var maxHeight = 0;
    return this.each(function(index, box) {
        var boxHeight = $(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);
    }).parent().height(maxHeight);
};

$(document).ready(function() {
    $('.group .module p').equalHeight();

    $(window).resize(function () {
        $('.group .module p').equalHeight();
    });

});

Стоит отметить, что это именно то, что делают таблицы. Пример: http://jsfiddle.net/Z59eT/3/

Таблица с одной строкой и двумя 50-процентными столбцами будет расти точно в соответствии с вашими требованиями.