jQuery .outerHeight() Method

What You’ll Learn

The .outerHeight() method gets or sets the height of matched elements including padding and border as a unitless pixel Number — ideal when the full border box matters for layout math and stacking. This tutorial covers the optional includeMargin flag, getter and setter overloads, comparisons with .height(), .innerHeight(), and .outerWidth(), callback setters since 1.8, and practical stack-sum patterns.

Introduction

After learning .innerHeight(), which measures content plus padding, you often need a dimension that also includes border — especially for fixed headers, stacked cards with margins, and subtracting one element’s full footprint from the viewport. jQuery’s .outerHeight() returns a plain number for the border box, ready for math and .animate() without parsing "96px" strings.

Available since jQuery 1.2.6 as a getter, .outerHeight() gained setter and callback forms in jQuery 1.8. Pass true as .outerHeight(true) to include vertical margin in the measurement. Unlike .height(), it does not work on $(window) or $(document) — use it on DOM elements only.

Understanding the .outerHeight() Method

Given a jQuery object, .outerHeight() either returns the current height of the first matched element — content plus vertical padding plus border — as a unitless pixel Number (getter), or sets the CSS height on every matched element so the outer box equals your value (setter). Margin is excluded by default; pass true to include it.

Think of .outerHeight() as a ruler that extends through padding and border. .height() stops at the content edge; .innerHeight() adds padding only; .outerHeight(true) continues through margin. Use .outerHeight() when subtracting a header from the viewport or summing stacked cards — for example, available = $(window).height() - $("#header").outerHeight().

📝 Syntax

jQuery .outerHeight() has four argument forms — one getter and three setters:

Get — optional includeMargin (since 1.2.6)

.outerHeight( [ includeMargin ] )  // -> Number

• includeMargin — optional Boolean. When true, vertical margin is included in the returned height.
• Returns the height of the first matched element including padding and border as a unitless pixel Number.
• Margin excluded by default — pass true to add it.
• Not for $(window) or $(document) — elements only.
• Returns undefined when the jQuery set is empty.

Set — Number with optional includeMargin (since 1.8)

.outerHeight( value [, includeMargin ] )  // -> jQuery

• value — target outer height in pixels as a Number (e.g. 60).
• includeMargin — optional Boolean; when true, margin is factored into the CSS height calculation.
• jQuery adjusts the CSS height so content plus padding plus border (and optionally margin) equals the value.
• Returns the original jQuery object for chaining — e.g. .outerHeight(60).addClass("mod").

Set — callback function (since 1.8)

.outerHeight( function( index, height ) {
  // return new outer height (Number)
} )

• index — zero-based position of the element in the matched set.
• height — current outer height of this element before the change.
• Return a new outer height per element; jQuery applies it and returns the jQuery object.

Return value

• Getter — unitless Number (pixels). May be fractional on sub-pixel layouts. Empty set → undefined.
• Setter — the original jQuery object for chaining.

Important note

Official jQuery API example

var p = $( "p" ).first();
$( "#result" ).text(
  "outerHeight: " + p.outerHeight() +
  " , outerHeight(true): " + p.outerHeight( true )
);

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 compare dimension methods, demonstrate callback setters, and sum stacked card heights with margin. Use DevTools or the Try-it links to run each snippet.

var p = $( "p" ).first();
$( "#result" ).text(
  "outerHeight: " + p.outerHeight() +
  " , outerHeight(true): " + p.outerHeight( true )
);

outerHeight: ~36px (content + padding + border)
outerHeight(true): ~56px (adds 10px top/bottom margin)
Getter returns unitless Number from first matched <p> only
Pass true to include vertical margin in the count

var modHeight = 60;
$( "div" ).one( "click", function() {
  $( this ).outerHeight( modHeight ).addClass( "mod" );
  modHeight -= 8;
});

1st click -> outerHeight set to 60px, box turns blue (.mod)
2nd click -> outerHeight set to 52px
3rd -> 44px, 4th -> 36px, 5th -> 28px (modHeight -= 8 each time)
.one() ensures each box handler runs only once

var $box = $( "#box" );
var lines = [
  ".height()              → " + $box.height() + "px (content)",
  ".innerHeight()         → " + $box.innerHeight() + "px (+ padding)",
  ".outerHeight()         → " + $box.outerHeight() + "px (+ border)",
  ".outerHeight(true)     → " + $box.outerHeight( true ) + "px (+ margin)"
];
$( "#out" ).html( lines.join( "<br>" ) );

.height()              → ~24px (content only)
.innerHeight()         → ~48px (content + 12px padding top/bottom)
.outerHeight()         → ~56px (inner + 4px border top/bottom)
.outerHeight(true)     → ~88px (outer + 16px margin top/bottom)
Each step adds one layer of the CSS box model

function showVal() {
  $( "#val" ).text( $( "#panel" ).outerHeight() + "px" );
}
showVal();
$( "#panel" ).on( "click", function() {
  $( this ).outerHeight( function( index, height ) {
    return Math.max( 48, height - 12 );
  });
  showVal();
});

Initial outerHeight displayed in #val
Each click -> outerHeight decreases by 12px
Stops shrinking at 48px minimum (Math.max)
Callback receives current outer height before each change

var sum = 0;
$( ".card" ).each( function() {
  sum += $( this ).outerHeight( true );
});
$( "#total" ).text(
  "Total vertical space (outerHeight with margin): " + sum + "px"
);

Card A, B, C each measured with .outerHeight(true)
Sum includes padding, border, and margin per card
Card B has extra padding and border — contributes more
Total displayed in #total for layout planning

🚀 Common Use Cases

• Viewport subtraction — available = $(window).height() - $("#header").outerHeight() to size content below a fixed header.
• Stacked card totals — sum .outerHeight(true) across cards to estimate total column height including margins.
• Dimension debugging — compare .height(), .innerHeight(), and .outerHeight() to trace box-model mismatches.
• Shrink-on-click UI — callback setter .outerHeight(function(i, h){ return h - 12; }) for interactive panels.
• Equal outer heights — read each row’s .outerHeight(), find the max, set all to match bordered columns.
• Animation targets — pair measured .outerHeight() with .animate() when border must stay inside the animated box.

📝 Notes

• Getter available since jQuery 1.2.6 — setter and callback since 1.8.
• Getter returns a unitless pixel Number from the first matched element only.
• Includes vertical padding and border — margin excluded unless true is passed.
• Not for $(window) or $(document) — use .height() on those instead.
• Empty jQuery set → getter returns undefined.
• Unreliable on hidden (display:none) elements — may return 0.
• On border-collapse: collapse tables, per-cell .outerHeight() may be inaccurate — measure the table or use getBoundingClientRect().
• Values can be fractional (e.g. 86.5) on sub-pixel or zoomed displays.
• Setter returns the original jQuery object — e.g. .outerHeight(60).addClass("mod").

💡 Best Practices