CODEWITHSUNDEEP
jquerycss
tonoslfx
tonoslfx

Reputation: 3442

jQuery OuterHeight/Height return the wrong height value when height is auto

How do I get the full height of a div object filled with text when the CSS height is set to Auto?

I tried OuterHeight and it still is not the full height of the div object.

JSFiddle: https://jsfiddle.net/zerolfc/jg8s5oq3/3/

jQuery:

$('div').find('*').each(function(ti,tv){
var c = parseInt( $(tv).css('font-size') ) / 2;
c = Math.floor( c );
c = ( c < 8 ? 8 : c );
$(tv).css('font-size', c + 'px');
});

console.log($('div').outerHeight(true));

CSS: 

div { display: block; width: 640px; height: auto; }
p { font-size: 24px; }

HTML:

<div>
<p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p>
<p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p>
<p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p>
<p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p>
</div>

Upvotes: 0

Views: 1464

Answers (1)

Ketan
Ketan

Reputation: 262

Returns right values in fiddle for me.

From http://api.jquery.com/outerheight/

$('div').outerHeight(true) = [height of the $('div') + margin of $('div')]

but your $('div') element doesnt have any margin as per your current css rules.

Which means, $('div').outerHeight(true) is going to return you the actual height of the $('div') without any margins.

In your case, value of all following 3 is going to be same.

  • $('div').outerHeight(true)
  • $('div').outerHeight()
  • $('div').css('height')

Upvotes: 1

Related Questions