0

Есть функция, которая выравнивает по высоте блоки с различным содержимым:

    var myHeight = function() {
        var mh = 0;
        $(".block").each(function () {
            var h_block = parseInt($(this).height());
            if(h_block > mh) {
                mh = h_block;
            };
        });
        $(".block").height(mh);
    }

Вызываю её на загрузку страницы и на изменение размера экрана.

На $(window).load всё отрабатывает корректно.

А вот с $(window).resize есть проблемы: высота блоков не подстраивается под объем контента, в результате при уменьшении экрана содержимое начинает выползать снизу за пределы некоторых блоков.

Почему так происходит? Как это исправить?

4
  • А почему высота блоков должна подстраиваться под объем контента? В вашей функции нет такого. Commented 3 июн. 2017 в 14:10
  • @MaximZasorin, по умолчанию. Если блоку не задана высота, она подстраивается под содержимое автоматически Commented 3 июн. 2017 в 14:47
  • Но в вашем случае высота задается с помощью функции. Commented 3 июн. 2017 в 14:51
  • @MaximZasorin, да, но она получается путём сравнения высот всех блоков, которые, в свою очередь, формируются именно содержимым - иначе откуда функция узнает высоты блоков? Commented 3 июн. 2017 в 14:55

1 ответ 1

1

Такое объяснение. При загрузке страницы у всех блоков значение height равно auto, и высота блоков вычисляется на основе контента, а метод .height() возвращает эту автоматически вычисленную высоту. После того, как ваша функция отработает, у всех блоков будет установлена фиксированная высота, и далее по событию resize метод .height() будет возвращать уже именно ее, и ваша функция никак не будет влиять на блоки.

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

$(".block").height('auto');

В вашем случае вот так:

var myHeight = function() {
    var mh = 0;
    $(".block").height('auto');
    $(".block").each(function () {
        var h_block = parseInt($(this).height());
        if(h_block > mh) {
            mh = h_block;
        };
    });
    $(".block").height(mh);
}
1
  • я понял, да, спасибо большое! Commented 3 июн. 2017 в 15:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.