如何动态调整DIV高度？ [英] How to dynamically adjust DIV height?

问题描述

我有以下结构：

 < 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 是一个传送带，并且我有一个下一个和 prev 控件。 .Jcarousel div 应根据下一个li的高度更改高度以显示在轮播中。

CSS

  .div1 {
 height：auto; 
背景：无重复滚动0％0％rgb（255,255,255）; 
 border-width：medium 1px 1px; 
 border-style：无固体; 
 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; 
位置：绝对; 
 list-style：none outside none; 
 margin：0px; 
 padding：0px; 
} 
 
 
 .jcarousel li {
 float：left; 
 width：480px; 
} 
 
 .item {
 margin：0px; 
 padding：0px 20px; 
身高：100％; 
} 
  

解决方案

以下解决方案：

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

JS

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 
 //检查< ul> 
中第一个元素的高度var count = 0 ; 
 var count_max = $（。jcarousel li）。length; 
 
 
 var alturas = []; 
 
 $（。jcarousel （）函数（）{
 var height = $（this）.height（）; 
 alturas.push（height）; 
}）; 
 
 $（。jcarousel）。css（'height'，alturas [count]）; 
 
 
 //按下prev控制时更改高度
 $（document）.on（click，。jcarousel-control-prev，function（）{
 if（count == 0）{
 
} else {
 count = count-1; 
 $（。jcarousel）。css（'height'，alturas [count]）; 
} 
 }）; 
 
 //按下一个控件时改变高度
 $（document）.on（click，。jcarousel-control-next，function（）{
 if （count！== count_max）{
 count = count + 1; 
 $（。jcarousel）。css（'height'，alturas [count]）; 
 
 
 
} else {
 //当到达< ul> 
 count = 0; 
 $中的最后一个< li>元素时尝试更新计数器（.jcarousel）.css（'height'，alturas [count]）; 
} 
 
 
}）; 
 
}）; 
< / script> 
  

I have the following structure:

        <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>

Each item within the <ul> will have different heights though I cannot make it work unless the <div class="jcarousel"> has a fixed height, which is the opposite of what I want. I want the <div class="jcarousel"> to dynamically change its height depending on the height of the <div> inside each <li>.

Forgot to say, and it may be important. The .Jcarousel div is a carousel and and I have a next and prev controls. The .Jcarousel div should change its height according to the height of the next li to appear in the carousel.

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%;
    }

解决方案

After trying some things I came up with the following solution:

I realised that creating in advance an array with all the heights of the <ul><li> it responds quick enough to update correctly the height of the .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>

这篇关于如何动态调整DIV高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！