Question

我有一个装有产品的容器。但是我的容器只有200只显示少数产品。有一个按钮可以增加高度以显示所有产品。唯一的问题是高度将根据通过CMS添加的产品数量而变化。是否可以增加容器的高度，以便它始终显示所有产品（无需硬编码高度）

UP DOWN

HTML：

    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>

</div>

CSS：

.container{
    background:grey;
    width:500px;
    height:200px;
    overflow:hidden;
}
.box{
    width:120px;
    height:220px;
    background:pink;
    margin:10px;
    float:left;

}

JS：

$('#btn-down').click(function(){
                $('.container').animate({height:'630px'}, 500);
            });

            $('#btn-up').click(function(){
                $('.container').animate({height: '200px'}, 500);
            });

Answer 1

使用max-height和toggleClass

的CSS：

.container{
    background:grey;
    width:500px;
    max-height:200px;
    overflow:hidden;
}
.box{
    width:120px;
    height:220px;
    background:pink;
    margin:10px;
    float:left;

}
.boxAutoHeight
{

 max-height:none;
}

的javascript：

$('#btn-down').click(function(){
$('.container').addClass('boxAutoHeight');
});

$('#btn-up').click(function(){
$('.container').removeClass('boxAutoHeight');
});

演示----＆GT; http://jsfiddle.net/junkie/Vx53r/3/

Answer 2

要使其动态化，您需要将.box元素包装在另一个容器中，如下所示：

<div class="container">
    <div class="box-container">
        <div class="box">Product</div>
        <!-- more .box -->
    </div>
</div>

.box-container {
    overflow: hidden;
}

然后在jQuery中，您可以将.container（已被截断）的高度设置为等于.box-container的高度，该高度未被截断：

$('#btn-down').click(function () {
    $('.container').animate({
        height: $('.box-container').height()
    }, 500);
});

Updated fiddle

您可以创建一个计算来计算每行3个项目的行数，但这种方式更容易，更快。

Answer 3

您可以计算总包装器高度并使用它。

    $('#btn-down').click(function(){
        $('.container').animate({height: Math.ceil($('.box').length / 3) * 240}, 500);
    });

    $('#btn-up').click(function(){
        $('.container').animate({height: '200px'}, 500);
    });

http://jsfiddle.net/Vx53r/5/

Answer 4

你可以试试这个

在你的向下功能中，如果你被修复为连续显示3个盒子，那么取一个盒子的高度+边距。
现在计算方框并除以3，然后设置你的身高。

下一个技巧是：

将容器的最大高度设置为200px，并设置溢出隐藏。
在向下，只需将最大高度移至100％，它将自动调整它。

Answer 5

尝试使用百分比。工作小提琴here

        $('#btn-down').click(function(){
            $('.container').animate({height:'100%'}, 500);
        });

即使在添加元素

之后，您也可以获得整个高度，而不是固定像素

Answer 6

你可以使用

        $('#btn-down').click(function(){
            $('.container').animate({height:'auto'}, 500);
        });

并删除

height:200px;

而不是单击按钮，它将采用包含所有项目的高度。但这会给你一个全长的初始高度。

否则你可以使用

    $('#btn-down').click(function(){
        $('.container').animate({height:'100%'}, 500);
    });

从200 px开始

div的动态高度

6 个答案: