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 /

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

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

• javascript
• jquery
• html
• css
• ajax

• 2 why dont you use height: auto;? – Alex Commented Sep 19, 2014 at 13:06
• Is what you're setting the minimum expected size? or is the div supposed to bee 0 height and width? – T J Commented Sep 19, 2014 at 13:11
• @Alex Initially preset "width" and "height" are important and can't be changed – Mia Commented Sep 19, 2014 at 13:18

4 Answers 4

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>

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>

Try this:

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

I would use height:auto like this;

#content {
    height : auto;
}