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

我正在尝试制作一个非常简单的HTML预览窗格，因为用户在HTML中键入内容。看一看

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

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

我遇到的问题是，预览窗格需要按高度增长，以便容纳输入到左侧文本区域的所有HTML。我注意到（当我输入这个时）SO已经在预览窗格中这样做了。有没有一种简单的方法可以根据事物的内部内容调整它们的高度，同时使它们彼此相邻？

改变

position:absolute; 

到

看起来是这样的：

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

---

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

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

---

由于将消息预览嵌套在字段集中并将溢出设置为隐藏的方式，它将永远是字段集的高度，并将被字段集的高度限制

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

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

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

---

我希望这会有所帮助。

请注意，某些浏览器不会扩展文档以容纳溢出的元素。例如，如果在页面底部之外增加一个DIV，某些浏览器将不会扩展页面，这意味着将没有滚动条转到元素底部。是的，但要小心使用float:right；因为元素将尽可能向右移动。所以你可以用一个给定的宽度来包围这些元素，欢迎你，也很抱歉忘了提到，高度：100%；也不需要。正如你在小提琴上看到的。这不是因为我只是在小提琴上证明了这一点。

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

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