使用javascript增加div高度以显示所有内容

Question

我试图在用户输入HTML时制作一个非常简单的HTML预览窗格。看看here。

执行起来非常简单。获取文本区域的值，使其成为旁边div的HTML。

$('#message-preview').html($('#message').val());

我遇到的问题是，预览窗格需要高度增长才能容纳所有输入到左侧文本区域的HTML。我注意到（因为我正在输入这个）SO已经在他们的预览窗格中执行此操作。有没有一种简单的方法可以将事物的高度调整到内在的内容，同时让它们彼此相邻？

Answer 1

更改

position:absolute; 

到

position:relative;float:right; 

所以它看起来像这样：

<div id="message-preview" class="well" style="position: relative; right: 0; width: 310px;float:right;"></div>

http://jsfiddle.net/xnPu7/2/

Answer 2

您可以使用caramba中的css方法或使用以下javascript方法：

$('#message-preview').height($('#message-preview').offsetHeight());

http://jsfiddle.net/xnPu7/7/

Answer 3

由于您在字段集中嵌套了消息预览并将溢出设置为隐藏的方式，它只会是字段集的高度，并且会受到其高度的限制。

您可以通过删除fieldset的overflow属性并将fieldset的高度设置为auto来解决此问题。这意味着字段集和消息预览将能够根据需要增长。

fieldset {
  position: relative;
  width: 100%;
  height: auto;
}

#message-preview {
  position: absolute;
  right: 0;
  width: 310px;
}

我希望这会有所帮助。