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

我有一个具有以下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），而不是添加动态内容后的高度

---

任何人有任何建议吗？

回调函数中的此

未引用

jQuery（“#反馈”）

对象。使用前请尝试缓存它

使用以下命令：

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

---

还考虑DIV元素是一个<代码>块框，这意味着获取父级的所有可用水平空间，并垂直地包装内容（垂直拉伸以提供子元素的空间）。因此，除非您没有遇到，否则不需要为其指定高度。

您是否尝试过不明确指定高度？div通常自动调整大小以容纳整个内容，除非内容是浮动的或绝对定位的。

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

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

或者，如果您不关心元素的大小，可以使用

可见性：隐藏
而不是
显示：无
我找到了解决方案

事实证明，
feedback\u text
元素是一个
span
元素。将其更改为
div
并添加以下样式
display:inline block
解决了我的问题

感谢您帮助我走上正确的道路：）
不需要明确设置高度。这里是我刚刚制作的，您可以看到您的代码正在运行，并成功地显示一个扩展的
，以适应设置的内容

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

更新：感谢您提供。我由此看出，您的问题在于容器
只包含
float
ed元素。浮动元素从正常文档流中取出，并且不会像通常那样影响其容器的高度。（还因为您在
.feedback\u text
元素上设置了明确的高度，我猜您不是有意这么做的。）

传统的破解/修复方法是在浮动元素下面添加一个最终包含的元素（可以是空的），设置为
clear
floats。这将强制包含图元拉伸以适合浮动图元。那么，你从这个角度出发：

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

您期望它如何准确扩展？您是否尝试过设置
height:auto？您尝试过删除行高吗？我尝试过在tje jQuery中设置
height:auto
，但不起作用。我的目标是将文本放在
DIV
@Steven Yes的边框内——您的问题是
中的两个
都是浮动的，这会使它们脱离正常的文档流，并停止
扩展。我已经添加了（a）传统的解决方案，一个非浮动div跟随浮动，通过CSS设置“clear”，并删除了您在反馈文本范围上设置的expicit高度。下一次，您可能希望提供更完整的代码——是浮动导致了问题。
...
#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>

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