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像素。

我在css中尝试过：

#wrapT{
    height:450px;
}

但是在这种情况下，在重新调整窗口大小时会出现问题 - 它总是保持450px。

还尝试在btn点击事件中添加：

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

没有成功。 #wrapT不断改变其高度。

Answer 1

我之前做过类似的事情。您可以做的是加载下一个项目当前的项目visibility:hidden;，可能还有一个较小的z-index。这意味着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，以便在数据存在时等待更新，但当然这是不切实际的（在您的情况下）。

如何在更改内容时保持div高度固定？

3 个答案: