.outerHeight()

Categories: CSS | Dimensions | Manipulation > Style Properties

.outerHeight( [includeMargin] ) Returns: Integer

Description: Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.

version added: 1.2.6.outerHeight( [includeMargin] )

includeMarginA Boolean indicating whether to include the element's margin in the calculation.

The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.

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

Example:

Get the outerHeight 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( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .outerHeight() 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 .outerHeight()? Report it to the jQuery core team.

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

björn ali

what happens when issuing this on a collection of elements?

Andy

READ!
Get the current computed height for the FIRST ELEMENT in the set of matched elements, including padding and border.

http://twitter.com/cemerick Chas Emerick

There's a typo in the docs. They should read:

If includeMargin is omitted or false, the padding and border are NOT included in the calculation…

http://www.learningjquery.com/ Karl Swedberg

The documentation is correct. outerHeight includes padding and border. If the includeMargin argument is set to true, then the margin is included in the calculation as well.

Isaac Morland

Suggested improved wording:

The padding and border are always included in the calculation; if includeMargin is true, the margin is also included.

Aris

For who likes to have the total scroll height of the element, you could use these extensions instead:

jQuery.fn.outerScrollHeight = function(includeMargin) {
var element = this[0];
var jElement = $(element);
var totalHeight = element.scrollHeight; //includes padding
//totalHeight += parseInt(jElement.css(“border-top-width”), 10) + parseInt(jElement.css(“border-bottom-width”), 10);
//if(includeMargin) totalHeight += parseInt(jElement.css(“margin-top”), 10) + parseInt(jElement.css(“margin-bottom”), 10);
totalHeight += jElement.outerHeight(includeMargin) – jElement.innerHeight();
return totalHeight;
};
jQuery.fn.outerScrollWidth = function(includeMargin) {
var element = this[0];
var jElement = $(element);
var totalWidth = element.scrollWidth; //includes padding
//totalWidth += parseInt(jElement.css(“border-left-width”), 10) + parseInt(jElement.css(“border-right-width”), 10);
//if(includeMargin) totalWidth += parseInt(jElement.css(“margin-left”), 10) + parseInt(jElement.css(“margin-right”), 10);
totalWidth += jElement.outerWidth(includeMargin) – jElement.innerWidth();
return totalWidth;
};
Martok

Is it possible to use the same measuring to set the height of a set? More precisely, is it possible to use $.height(x) in a way so that all elements have $.outerHeight(true)==x ?
Toto

.outerHeight() don't works with hidden elements like .height() method
Toto

.outerHeight() don't works with hidden elements like .height() method

jQuery API