КаКак установить высоту активного таба?

Вопрос-ответ JavaScript
1

Есть сайт, стоят табы
раздел напр. MONOLITH LINING

и через js подставляется высота контейнера
но если в одном таб контейнере блоков 8, в 2 ряда
а в другом 4 в 1ряд, высота остается - то есть остается пустота
как можно высоту подстроить под активное окно? что бы в каждой вкладке была своя высота

(function($, document) {
    function setupTabs(container) {
        let height = -1;

        container.find('.tab__content').each(function() {
            height = height > $(this).outerHeight() ? height : $(this).outerHeight();
            $(this).css('position', 'absolute');
        });

        container.css('min-height', height + 550 + 'px');
    }

    // Инициализация для каждого набора табов
    $('[data-tabs]').each(function() {
        setupTabs($(this));
    });

}(jQuery, document));
2

Я возможно не верно на разных этапах своего ответа понимаю в чем именно проблема, поправляй-дополняй если что.

Код делает именно то что написано: задает минимальную высоту контейнера внутри которого находится несколько блоков с табами:

image
image1018×288 32 KB

Одни табы прячутся, другие показываются при нажатии на лейблы. Из-за заданной min-heigh контейнеру бывает остается пространство потому что min-height по значение это максимальный по высоте таб.

Простое в реализации, но усложняющее ситуацию еще дальше, решение в том чтобы менять min-height контейнера при показе содержимого каждого его таба.

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

А проблема выше, с той разметкой что есть сегодня, кажется от того что на бекенде разметка самих кнопок табов и их содержимого генерируется одним циклом (опять, таки я могу не угадать как оно на самом деле). Нужно сделать два цикла по одной и той же структуре данных. Один сгенерирует отдельный список табов второй - отдельный список их содержимого. Сгенерировать классы типа tab-1, content-1 и связать все на клиенте jquery.

Как всегда дилемма между “правильно и долго” и “грязно и быстро”. Выбор за тобой. А реальности быстро и грязно чаще всего оказывается верным выбором.