[英]How to dynamically adjust DIV height?
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">‹</a>
<a href="#" class="jcarousel-control-next">›</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. 尽管<ul>
<div class="jcarousel">
除非具有固定的高度,否则我无法使<ul>
每个项目具有不同的高度,这与我想要的相反。 I want the <div class="jcarousel">
to dynamically change its height depending on the height of the <div>
inside each <li>
. 我希望<div class="jcarousel">
根据每个<li>
内<div>
的高度动态更改其高度。
Forgot to say, and it may be important. 忘了说,这可能很重要。 The .Jcarousel div
is a carousel and and I have a next
and prev
controls. .Jcarousel div
是一个轮播,我有一个next
和prev
控件。 The .Jcarousel div
should change its height according to the height of the next li to appear in the carousel. .Jcarousel div
应根据要出现在转盘中的下一个li的高度来更改其高度。
CSS 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%;
}
Try the following code mate... :) 试试下面的代码伴侣... :)
var totalHeight = 0;
$('.item').each(function(){
totalHeight += $(this).height();
});
if(totalHeight < 40){
$('.jcarousel').height(1000);
}
You gave height: 100%
to the .item
. 您指定了height: 100%
.item
height: 100%
。 It means it will set its height to 100% of its parent which is 700px. 这意味着它将高度设置为其父级的100%,即700px。 If you want the .jcarousel
to be dependent on .item
remove height: 700px
from .jcarousel
. 如果你想在.jcarousel
依赖于.item
除去height: 700px
从.jcarousel
。
You also set float: left
to li
elements. 您还设置了float: left
到li
元素。 It makes the ul
to be 0px high. 使ul
高0px。 If you want to fix it add the following CSS 如果要修复它,请添加以下CSS
.jcarousel > ul:after {
content: "";
display: block;
clear: both;
}
Please use below jQuery code for set Dynamic height of DIV 请使用下面的jQuery代码设置DIV的动态高度
$(document).ready(function(){
var nHeight = 0;
$(".jcarousel li div.item").each(function(){
nHeight += $(this).height();
});
$(".jcarousel").height(nHeight);
});
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
. 我意识到,预先创建一个具有<ul><li>
所有高度的数组,它会足够迅速地响应以正确更新.Jcarousel div
的高度。
JS 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>
Maybe you can set a min-height
to the class jcarousel
. 也许您可以将jcarousel
类设置为min-height
。 Like that: 像那样:
.jcarousel {
position: relative;
overflow: hidden;
min-height: 700px;
margin: 0px -20px;
padding: 0px 20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.