根据预设"宽度"和"高度"的内容动态更改"div"的高度

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

只需height从css中删除即可.那个怎么样:

的jsfiddle

编辑:如果无法更改添加 overflow: auto;

的jsfiddle

Answer 2

使用 min-height而不是相应地height扩展<div>。

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

<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>