Dynamically change height of "div", based on content with preset "width" and "height"

Question

I have a "div" with preset "width" and "height". I need to change the height of that "div" based on content. I was looking for some JavaScript but couldn't find appropriate for me.

Here is my simple example, which needs an improvement 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;
}

EDIT: Initially preset "width" and "height" are important and can't be changed

Answer 1

Just remove height from CSS. If you need a preset height, use min-height instead. What about that one:

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>

Edit: if you want to keep the height of the container and show scrollable content, use 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>

Answer 2

I would use height:auto like this;

#content {
    height : auto;
}

Answer 3

Use min-height instead of height so that the <div> expands accordingly.

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>

Answer 4

Try this:

$('#content').height($('#content')[0].scrollHeight)