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个ed元素。浮动元素从正常文档流中取出，并且不像通常那样影响其容器的高度。（还因为你在.feedback_text元素上设置了明确的高度，我猜你不应该这样做。）

传统的hack / fix是在浮动元素下面添加一个最终包含的元素（可以为空），设置为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>

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

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

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

我updated my example jsFiddle表明这是有效的。所需要的只是overflow div上的feedback属性，因为它适用于我的所有浏览器。根据那篇文章，你可能需要为某些版本的Opera或IE设置一个明确的高度或宽度（例如width: 100%;），但是我建议你在没有它的情况下给它一个爆炸，看它是否在在打扰之前，你正在瞄准目标。

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

Answer 2

回调函数中的

this不引用jQuery('#feedback')对象。在使用之前尝试缓存它。

使用它：

var feedBackDiv = $('#feedback');
feedBackDiv.fadeIn('normal', function(){
    feedBackDiv.css({'height':'100%'});
});

还要考虑div元素是block box，意味着获取父级的所有可用水平空间，并垂直包装内容（垂直拉伸以为子元素提供空间）。因此，除非您没有遇到great collapse，否则您无需为其指定高度。

Answer 3

我找到了解决方案。

事实证明，feedback_text元素是span元素。将此更改为div并添加以下样式display: inline-block解决了我的问题。

感谢您帮助我走上正确的道路：）

Answer 4

您是否尝试过没有明确指定身高？除非内容浮动或绝对定位，否则DIV通常会自动调整大小以容纳整个内容。

Answer 5

我认为问题可能与display属性设置为none有关。

尝试使用其他方法隐藏元素，例如，您可以在css中将其高度设置为0，然后在添加内容后将其设置回自动。

或者，如果您不关心元素的大小，可以使用visibility:hidden代替display:none。

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

5 个答案: