Question

我有以下结构：

        <div class="div1">          
            <div class="div2">
                <div class="jcarousel">
                    <ul>
                        <li>
                           <div class="item">ITEM 1</div>div>
                        </li>
                        <li>
                           <div class="item">ITEM n</div>div>
                        </li>
                    </ul>
                </div>
              <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
              <a href="#" class="jcarousel-control-next">&rsaquo;</a>
            </div>
        </div>

<ul>中的每个项目都会有不同的高度虽然我无法使其工作，除非<div class="jcarousel">具有固定的高度，这与我想要的相反。我希望<div class="jcarousel">动态更改其高度，具体取决于每个<div>内<li>的高度。

忘了说，这可能很重要。 .Jcarousel div是一个轮播，我有一个next和prev控件。 .Jcarousel div应根据要显示在轮播中的下一个li的高度来更改其高度。

CSS

       .div1 {
        height: auto;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        border-width: medium 1px 1px;
        border-style: none solid solid;
        border-color: -moz-use-text-color rgb(255, 255, 255) rgb(255, 255, 255);
        padding: 20px 20px 0px;
        margin-bottom: 50px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.46);
    }

    .div2 {
        margin-top: -50px;
    }

    .jcarousel {
        position: relative;
        overflow: hidden;
        height: 700px;
        margin: 0px -20px;
        padding: 0px 20px;
    }

    .jcarousel ul {
        width: 20000em;
        position: absolute;
        list-style: none outside none;
        margin: 0px;
        padding: 0px;
    }


    .jcarousel li {
        float: left;
        width: 480px;
    }

    .item {
        margin: 0px;
        padding: 0px 20px;
        height: 100%;
    }

Answer 1

尝试以下代码配对...：）

var totalHeight = 0;
$('.item').each(function(){
    totalHeight += $(this).height();
});

if(totalHeight < 40){
    $('.jcarousel').height(1000);
}

http://jsfiddle.net/JHZSF/

Answer 2

您将height: 100%提供给.item。这意味着它将其高度设置为其父级的100％，即700px。如果您希望.jcarousel依赖.item height: 700px移除.jcarousel。

您还可以将float: left设置为li元素。它使ul高出0px。如果要修复它，请添加以下CSS

.jcarousel > ul:after {
    content: "";
    display: block;
    clear: both;
}

Answer 3

请使用以下jQuery代码设置DIV的动态高度

$(document).ready(function(){
     var nHeight = 0;
     $(".jcarousel li div.item").each(function(){
            nHeight += $(this).height();
     });
     $(".jcarousel").height(nHeight);
});

Answer 4

在尝试了一些事情后，我提出了以下解决方案：

我意识到事先创建一个具有<ul><li>所有高度的数组，它的响应速度足以正确更新.Jcarousel div的高度。

JS

      <script type="text/javascript">
            $(document).ready(function(){


                  // checking the height of the first element in the <ul>
                 var count = 0;
                 var count_max = $(".jcarousel li").length;


                 var alturas = [];

                  $(".jcarousel li div.cenario").each(function(){
                        var height = $(this).height();
                        alturas.push(height);
                  });

                 $(".jcarousel").css('height',alturas[count]);


                 // changing height when pressing the prev control
                 $(document).on("click",".jcarousel-control-prev", function(){
                    if (count == 0) {

                    } else {
                        count = count-1;
                        $(".jcarousel").css('height',alturas[count]);
                    }
                 });

                // changing height when pressing the next control
                 $(document).on("click",".jcarousel-control-next", function(){
                    if (count !== count_max) {
                        count = count+1;
                       $(".jcarousel").css('height',alturas[count]);



                    } else {
                        // trying to update the counter when reach the last <li> element within the <ul>
                        count = 0;
                        $(".jcarousel").css('height',alturas[count]);
                    }


                });

            });
        </script>

Answer 5

也许您可以将min-height设置为班级jcarousel。像那样：

.jcarousel {
        position: relative;
        overflow: hidden;
        min-height: 700px;
        margin: 0px -20px;
        padding: 0px 20px;
    }

如何动态调整DIV高度？

5 个答案: