jQuery .innerHeight() Method

What You’ll Learn

The .innerHeight() method gets or sets the height of matched elements including padding as a unitless pixel Number — ideal when the padded inner box matters for scroll areas and layout math. This tutorial covers getter and setter overloads, comparisons with .height(), .outerHeight(), and .css("height"), callback setters since 1.8, and practical scroll-panel patterns.

Introduction

After learning .height(), which measures the content box only, you often need a dimension that includes padding — especially for scrollable panels, cards with internal spacing, and comparisons with CSS clientHeight. jQuery’s .innerHeight() returns a plain number for the content area plus vertical padding, ready for math and .animate() without parsing "96px" strings.

Available since jQuery 1.2.6 as a getter, .innerHeight() gained setter and callback forms in jQuery 1.8. The getter reads the padded inner height of the first matched element; the setter adjusts CSS height so the inner box (content plus padding) matches your target. Unlike .height(), it does not work on $(window) or $(document) — use it on DOM elements only.

Understanding the .innerHeight() Method

Given a jQuery object, .innerHeight() either returns the current height of the first matched element — content plus vertical padding — as a unitless pixel Number (getter), or sets the CSS height on every matched element so the inner box equals your value (setter). Border and margin are excluded; only padding is added on top of content height.

Think of .innerHeight() as a ruler that extends through padding. .height() stops at the content edge; .outerHeight() continues through border (and optionally margin). Use .innerHeight() when scrollable areas or padded containers need precise pixel targets — for example, fitting a panel to the remaining viewport below a fixed header.

📝 Syntax

jQuery .innerHeight() has three argument forms — one getter and two setters:

Get — no arguments (since 1.2.6)

.innerHeight()  // -> Number

• Returns the height of the first matched element including padding as a unitless pixel Number.
• Border and margin are excluded — padding is included.
• Not for $(window) or $(document) — elements only.
• Returns undefined when the jQuery set is empty.

Set — Number (since 1.8)

.innerHeight( value )  // -> jQuery

• value — target inner height in pixels as a Number (e.g. 70).
• jQuery adjusts the CSS height so content plus padding equals the value.
• Returns the original jQuery object for chaining — e.g. .innerHeight(70).addClass("mod").

Set — callback function (since 1.8)

.innerHeight( function( index, height ) {
  // return new inner height (Number)
} )

• index — zero-based position of the element in the matched set.
• height — current inner height of this element before the change.
• Return a new inner 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( "innerHeight: " + p.innerHeight() + "px" );

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 compare dimension methods, demonstrate callback setters, and build a viewport-fitted scroll panel. Use DevTools or the Try-it links to run each snippet.

var p = $( "p" ).first();
$( "#result" ).text( "innerHeight: " + p.innerHeight() + "px" );

innerHeight: 32px (example — content + 5px top/bottom padding)
Getter returns unitless Number from first matched <p> only
Border on the paragraph is excluded from the count

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

1st click -> innerHeight set to 70px, box turns blue (.mod)
2nd click -> innerHeight set to 62px
3rd -> 54px, 4th -> 46px, 5th -> 38px (modHeight -= 8 each time)
.one() ensures each box handler runs only once

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

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

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

Initial innerHeight displayed in #val
Each click -> innerHeight decreases by 10px
Stops shrinking at 40px minimum (Math.max)
Callback receives current inner height before each change

function fitPanel() {
  var headerH = $( "#header" ).outerHeight();
  var available = $( window ).height() - headerH;
  $( "#panel" ).innerHeight( available );
}
fitPanel();
$( window ).on( "resize", fitPanel );

Panel innerHeight = window height - header outerHeight
30 rows scroll inside #panel with overflow-y: auto
Resize browser -> fitPanel() recalculates on window resize
Uses $(window).height() for viewport, .innerHeight() for panel

🚀 Common Use Cases

• Scrollable panels — $("#panel").innerHeight($(window).height() - headerH) to fill remaining viewport with a scroll area.
• Padded card sizing — when CSS padding is fixed, .innerHeight() targets the visible inner box including that padding.
• Dimension debugging — compare .height(), .innerHeight(), and .outerHeight() to trace box-model mismatches.
• Shrink-on-click UI — callback setter .innerHeight(function(i, h){ return h - 10; }) for interactive panels.
• Equal inner heights — read each card’s .innerHeight(), find the max, set all to match padded columns.
• Animation targets — pair measured .innerHeight() with .animate() when padding 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 — border and margin excluded.
• 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.
• Values can be fractional (e.g. 82.5) on sub-pixel or zoomed displays.
• Setter returns the original jQuery object — e.g. .innerHeight(70).addClass("mod").

💡 Best Practices