使用jQuery添加动态内容时,DIV不会扩展

Question

我有一个带有以下CSS的div:

#feedback {
  min-height: 24px;
  line-height: 24px;
  margin-bottom: 10px;
  display: none;
}

然后我使用添加一些内容jQuery.

jQuery('.feedback_text').html(feedback.message);
jQuery('.feedback_icon').addClass(feedback.type);
jQuery('#feedback').fadeIn('normal', function() {
  jQuery(this).height('100%');
});

问题是,当我有多行文本时,DIV不会扩展.

我尝试过使用$('.feedback_text').height(),但它只给我CSS(24px)中指定的高度,而不是动态内容添加后的高度.

有人建议吗？

Answer 1

不应该明确设置高度.这是我刚刚创建的jsFiddle的一个示例,您可以在其中看到您的代码正在运行并成功显示已<div>扩展以适合所设置的内容.

是否有一些其他CSS规则影响你的div？如果用CSS调试器检查它会是什么样子？

更新:感谢您提供更完整的代码.我从中看到你的问题是你的容器<div>只包含floated元素.浮动元素从正常文档流中取出,并且不像通常那样影响其容器的高度.(还因为你在你的.feedback_text元素上设置了一个明确的高度,我猜你不是故意这样做的.)

传统的黑客/解决方法是在浮动元素下添加一个最终包含的元素(可以为空),设置为clear浮点数.这迫使包含元素伸展以适合浮动元素.所以,你从这里开始:

...
#feedback span { float: left }
...
<div id="feedback">
    <span class="feedback_icon"></span>
    <span class="feedback_text"></span>
</div>

对此:

...
#feedback span { float: left }
.clearfix { clear: both }
...
<div id="feedback">
    <span class="feedback_icon"></span>
    <span class="feedback_text"></span>
    <div class="clearfix"></div>
</div>

..一切都应该开始工作了.我已经更新了你的例子,在这个jsFiddle中使用这个技术.

但是,根据你想要实现的目标,我不确定你是否需要漂浮这两个元素.将图像向左浮动并使文本保持非浮动状态以及其他一些调整,可以获得所需的效果但没有clearfix hack.这是我的最后一个例子(注意我已经摆弄了你的图像等,以获得一个有效的例子.)

更新:我刚刚在upvote之后回到这个答案,我觉得我应该分享更现代的解决方案来扩展块元素以包含它们的浮动,这是为overflow: hidden;容器添加一个简单的.这个技巧适用于所有现代浏览器,虽然有些也可能需要设置宽度,并且可能是div在这个问题中扩展包含浮点数的最简单方法.

我已经更新了我的示例jsFiddle来显示这个工作.所需要的只是div overflow上的属性feedback,它适用于我的所有浏览器.根据那篇文章,你可能需要width: 100%;为某些版本的Opera或IE 设置一个明确的高度或宽度(例如),但是我建议你在没有它的情况下给它一个爆炸,看看它是否适用于你所针对的浏览器在打扰之前.

#feedback {
  overflow: hidden;
  min-height: 24px;
  line-height: 24px;
  margin-bottom: 10px;
  display: none;
}