在更改内容时，如何保持div高度不变？

Question

<div id='wrapT'>some stuff here</div>
<div id='btnsT'>
<img id='prev' src='btns/prev_01.png' alt='prev'>
<img id='next' src='btns/next_01.png' alt='next'>
</div>

js

    $('#btnsT #next').click(function(){
    var a = $('#divsT > div').eq(xdiv).html();
    $('#wrapT').html(a);
});

#wrapT正确地更改了它的内容，但是它首先将其height更改为0几秒钟，然后返回到原来的高度。

在此过程中如何保持高度固定？

重要:旧内容和新内容的高度都是450 is。

我试过使用css：

#wrapT{
    height:450px;
}

但是在这种情况下，在调整窗口大小的过程中会出现一个问题--它总是保持450 in。

还尝试添加btn单击事件：

var x = $('#wrapT').height();
$('#wrapT').css('height', x + 'px');
$('#wrapT').html(a);
$("#wrapT").css('height', 'auto');

聪明的成功。#wrapT不断地改变它的高度。

Answer 1

我以前也做过类似的事。您可以做的是在后面加载下一项，当前的条目带有visibility:hidden;，可能还有一个较小的z索引。这意味着wrapT的形状将保持不变。

然后，您可以这样做：

$('#OldItem').fadeOut(400, function() {
   $(this).remove();
});
$('#NewItem').fadeIn(400)

Answer 2

尝试为您的元素设置min-height max-height min-width max-width。

Answer 3

为了给它一个固定的位置，您基本上希望将最小和最大的高度都设置为期望的高度。

#wrapT{
    min-height:450px;
    max-height:450px;
    height:450px;
    width:300px;
}

它更改为0px，因为检索数据需要一些时间。

您还可以使用websockets，以便每当数据存在时，它都会等待更新，但这当然是不切实际的(在您的情况下)。