.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.

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.min.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:

Comments

Support requests, bug reports, and off-topic comments will be deleted without warning.
Please do post corrections or additional examples for .outerHeight() below. We aim to quickly move corrections into the documentation.
If you need help, post at the forums or in the #jquery IRC channel.
Report bugs on the bug tracker or the jQuery Forum.
Discussions about the API specifically should be addressed in the Developing jQuery Core forum.

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;
};
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.

jQuery API