javascript - 根据预设 "div"和 "width"的内容动态更改 "height"的高度

Question

我有一个带有预设“宽度”和“高度”的“div”。我需要根据内容更改该“div”的高度。我一直在寻找一些 JavaScript，但找不到适合我的。

这是我的简单示例，需要改进http://jsfiddle.net/dmitry313/1zr6Lhwa/

HTML

<div id="content">
<h2>Text</h2>
<p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example </p> 
</div> 

CSS

    h2 {
font:18px/30px Arial;
}   
#content {
width:200px;
height:100px;
border:1px solid #000;
background: yellow;
}

编辑:最初预设的“宽度”和“高度”很重要，不能更改

Answer 1

只需从 CSS 中删除 height。如果您需要预设高度，请改用 min-height。那个怎么样:

h2 {
  font: 18px/30px Arial;
}

.content {
  width: 200px;
  min-height: 100px;
  border: 1px solid #000;
  background: yellow;
}

<div class="content">
<h2>Text</h2>
<p>Example Example</p>  
</div>   
<br>
<div class="content">
<h2>Text</h2>
<p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example </p>  
</div>

编辑:如果你想保持容器的高度并显示可滚动的内容，使用overflow: auto;

h2 {
  font: 18px/30px Arial;
}

.content {
  width: 200px;
  height: 100px;
  overflow: auto;
  border: 1px solid #000;
  background: yellow;
}

<div class="content">
<h2>Text</h2>
<p>Example Example</p>  
</div>   
<br>
<div class="content">
<h2>Text</h2>
<p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example </p>  
</div>