2

See this jsFiddle: http://jsfiddle.net/kb2vN/1/

The height of the div 'mytext' as specified in CSS is 100. The total offsetHeight of the 3 paragraphs in the div is 3 * 40 = 120. Its this value (120) that I am after. Why is this value not returned by document.getElementById('mytext').offsetHeight? It would be logical that the offsetHeight of a parent element is the sum of the offsetHeights of its child nodes.

If I do NOT set the height of the 'mytext' div in CSS to 100px, the (in my opinion) correct offsetHeight of 120 is returned. But not setting the height in CSS is not an option in my case.

Why does the offsetHeight of the div correspond to the CSS height, and is there an alternative height property that reflects the actual div height, even if a height is specified in CSS?

By the way, I use Chrome as my web browser.

EDIT I realize that I haven't been totally clear on the purpose of all this. In the end I want to check whether the actual contents of a div (that are put in the div dynamically) do not cause the div to take up more than a specified maximum height (by comparing the div's offsetHeight to the max. height allowed). Since I want to check in JavaScript whether this is the case, using properties like min-height or max-height does not seem to make sense.

Jeroen
  • 839
  • 13
  • 20
  • You can Check the height using the computedStyle method: See [My Answer here](http://stackoverflow.com/questions/6134471/have-problem-when-use-elements-that-added-to-an-array-with-document-getelementb/6134501#6134501) – Ibu Mar 28 '12 at 18:16
  • @Ibu The computed style of the 'height' property also returns 100(px), see the 'report3' value in the original jsFiddle. Update: Oops lost the changes, but you can try it yourself. – Jeroen Mar 28 '12 at 18:22

4 Answers4

1

If you add a border and some additional comment you will see why this is correct and IS the offset height:

http://jsfiddle.net/kb2vN/4/

You'll notice that the element #mytext does only take up 100 px. The content simply overflows it. If you put content after the element, you will see that it starts after only 100 px and the overflow from the box goes right on top of it.

I think what you really want is min-height:

http://jsfiddle.net/kb2vN/6/

James Montagne
  • 77,516
  • 14
  • 110
  • 130
  • Isn't that because I have specified the height in CSS? If you disable the height of the 'mytext' div in the CSS, the offsetHeight of the div changes in 162. See http://jsfiddle.net/kb2vN/8/ – Jeroen Mar 28 '12 at 18:25
  • because you set the height in CSS it is only "taking up" 100 px. That is what "offset" means, how much it offsets other content on the page. If your intent is for the box to be 160px then you shouldn't set it to a static 100px. If you want it to be a minimum of 100px and grow with the content otherwise, then you should use min-height. – James Montagne Mar 28 '12 at 18:31
  • James, thank you for your explanation. I think you are right, but I have some specific requirements that I haven't been clear about. I have updated my question. – Jeroen Mar 28 '12 at 18:56
0

clientWidth and clientHeight properties return actual size of an element.

Eugene Retunsky
  • 13,009
  • 4
  • 52
  • 55
0

You are looking for getScrollSize().y

http://mootools.net/docs/core/Element/Element.Dimensions

Returns an Object representing the size of the target Element, including scrollable area. The following method is also available on the Window object.

http://jsfiddle.net/kb2vN/7/

You can do comparison as follows:

if($('mytext').getScrollSize().y != $('mytext').offsetHeight) {

http://jsfiddle.net/kb2vN/11/

Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
0

If you temporarily set the height of the element to auto, then you can test for the offsetHeight with the element expanded to fit its contents. Then set the height of the element back to the previous value.

js1568
  • 7,012
  • 2
  • 27
  • 47