.innerHeight()

Categories: CSS | Dimensions | Manipulation > Style Properties

.innerHeight() Returns: Integer

Description: Get the current computed height for the first element in the set of matched elements, including padding but not border.

version added: 1.2.6.innerHeight()

This method returns the height of the element, including top and bottom padding, in pixels.

This method is not applicable to window and document objects; for these, use .height() instead.

Example:

Get the innerHeight of a paragraph.

<!DOCTYPE html>
<html>
<head>
  <style>p { margin:10px;padding:5px;border:2px solid #666; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .innerHeight() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .innerHeight()? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

Ryan

I'm using .innerHeight() to calculate the size of a div that contains text. It works out great in both Safari and Chrome, but for some odd reason it does not work as great in Firefox. For some reason the .innerHeight() only grabs the height for the first line of text, and not the second line. This is only the case in Firefox, otherwise it works fine in the other browsers. Anyone know of a solution?

Ryan

I haven't figured out the bug, but I found a temporary solution. In order to get the correct height value for a div containing multiple lines of text you need to use both .height() and .innerHeight() (only if the div has padding). This solution works for now, but it would be nice if I didn't have to use two methods to get the value that only one method should get.

JD

Can you explain how you used both .height() and .innerHeight() to grab the correct height value in firefox? I'm having the same issue with .innerHeight() in firefox, whereas chrome/safari appear to be calculating correctly.

Blaggg

great ye

Ryan

I'm using .innerHeight() to calculate the size of a div that contains text. It works out great in both Safari and Chrome, but for some odd reason it does not work as great in Firefox. For some reason the .innerHeight() only grabs the height for the first line of text, and not the second line. This is only the case in Firefox, otherwise it works fine in the other browsers. Anyone know of a solution?
Ryan

I haven't figured out the bug, but I found a temporary solution. In order to get the correct height value for a div containing multiple lines of text you need to use both .height() and .innerHeight() (only if the div has padding). This solution works for now, but it would be nice if I didn't have to use two methods to get the value that only one method should get.

jQuery API