изменение размера div после фильтрации содержимого div

Question

Я использую фильтры jquery для сужения продуктов.

Все продукты имеют свои собственные элементы div, но все находятся внутри одного "большого элемента div".

При использовании фильтра элементы для продуктов, которые не соответствуют критериям фильтра, исчезают. Однако высота «большого div» не меняется. Как бы мы могли сделать так, чтобы высота «большого div» изменялась автоматически?

Чтобы уточнить, перед применением фильтра есть много продуктов, поэтому высота div очень велика. После применения фильтра количество продуктов в этом элементе уменьшается, но высота не изменяется. Это оставляет это с кучей пустого места в основании.

Как только размер окна браузера немного изменяется, он запускает высоту "большого div", чтобы приспособиться к фильтруемым продуктам. Но как мы можем сделать это без необходимости изменять размер браузера?

Спасибо!

Answer 1

Как вы можете видеть в следующем фрагменте кода #largediv изменяет размеры по желанию (желтая область). Поэтому в вашем коде должно быть что-то еще, добавляющее эту дополнительную высоту.

$(function () {
    $("#filter1button").click(function () {
        $(".productsa, .productsb, .productsc").hide();
        $(".productsd").show();
    });
});

#largediv {
    background: yellow
}

#largediv div {
    width: 200px;
    border: 1px solid blue;
    padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="filter1button">Filter Class D</button>
<div id="largediv">
    <div class="productsa">
        <b>Product Class A</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsb">
        <b>Product Class B</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsc">
        <b>Product Class C</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsd">
        <b>Product Class D</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsa">
        <b>Product Class A</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsb">
        <b>Product Class B</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsc">
        <b>Product Class C</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsd">
        <b>Product Class D</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
</div>