Question

provided a DIV with

• fixed heigh
• disabled scrolling feature
• whose content is editable

I need to understand if its content height as reached or even exceeded the height of the same div according to the element (text or other) inserted by the user (control triggered on event basis). Does anybody have any simple idea how to detect if the content of a DIV has reached or even exceeded the height of the same DIV?

Answer 1

As stian said in their answer, you can use jQueries height() method to obtian the height of a given element.

However, you’ll want to utilise this method on a second container internal the the main div. Such that:

<div id="myMainDivWithAHeight">
     <div id="myInnerDivExpandingWithTheContent"></div>
</div>

This way you’ll be calculating the height of the inner div which is expanding in relation to the content, instead of the height of the fixed-height outter div.

You can then compare the values of the inner and outter div heights.