过滤div内容后调整div大小
过滤div内容后调整div大小
提问于 2019-04-21 21:32:03
我正在使用jquery过滤器来缩小产品范围。
所有产品都有自己的div，但都在一个“大div”中。
当使用过滤器时，不符合过滤条件的产品的div将消失。但是，“大div”的高度不会改变。我们如何让“大div”的高度自动调整呢？
需要说明的是，在应用滤镜之前，有很多产品，所以div的高度非常大。一旦应用了过滤器，此div中的产品数量就会减少，但高度不会改变。这会在底部留下一堆空白的空间。
只要浏览器窗口稍微调整一下大小，它就会触发“大div”的高度来调整以适应过滤后的产品。但我们如何才能在不需要调整浏览器大小的情况下实现这一点呢？
谢谢!
回答 1
Stack Overflow用户
发布于 2019-04-22 01:13:19
正如您在下面的代码片段中所看到的，#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55783187
复制相关文章
相似问题
腾讯云开发者
