jquery - 使用 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

应该不需要明确设置高度。这是 an example on jsFiddle我刚刚做了，在那里你可以看到你的代码正在运行并成功显示 <div>展开以适应设置的内容。

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

更新:感谢您提供 fuller code .我从这里看出你的问题是你的容器 <div>只包含 float编辑元素。 float 元素脱离了正常的文档流，并且不会像通常那样影响其容器的高度。 (还因为您已经在 .feedback_text 元素上设置了明确的高度，我猜您不是故意的。)

传统的 hack/fix 是在 float 元素下方添加一个最终包含的元素(可以为空)，设置为 clear花车。这会强制包含元素拉伸(stretch)以适应 float 元素。所以，你从这个开始:

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

..一切都应该开始工作了。我已经更新了您的示例以使用此技术 in this jsFiddle .

不过，从您想要实现的目标来看，我不确定您是否需要同时 float 这两个元素。将图像向左浮动并使文本保持非 float 状态，再加上一些其他调整，可以让您获得想要的效果，但无需 clearfix hack。 Here's my final example (请注意，我已经修改了您的图片等，以获得一个有效的示例。)

更新:我刚刚在投票后回到这个答案，我觉得我应该分享 more modern solution扩展 block 元素以包含它们的 float ，即添加一个简单的 overflow: hidden;到容器。这个技巧适用于所有现代浏览器，尽管有些浏览器可能还需要设置宽度，并且可能是扩展 div 的最简单方法。包含这个问题中的 float 。

我已经 updated my example jsFiddle展示这个工作。它所需要的只是 overflow feedback 上的属性(property)div 让它适用于我所有的浏览器。根据那篇文章，您可能需要为某些版本的 Opera 或 IE 设置明确的高度或宽度(例如 width: 100%; )，但我建议您在没有它的情况下试一试，看看它是否适用于您的浏览器在打扰之前先确定目标。

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