What Is the jQuery innerHeight Method?

This article provides an overview of the jQuery innerHeight() method, explaining its core function, syntax, and role in DOM dimension calculations. You will learn how it measures elements based on the CSS box model, how it differs from related methods like height() and outerHeight(), and how to use it to both retrieve and set element dimensions in dynamic web layouts.

The primary purpose of the jQuery innerHeight() method is to calculate the internal height of an element, which includes the element's content area plus its top and bottom padding. It explicitly excludes the height of borders, margins, and horizontal scrollbars.

How It Works within the Box Model

To understand innerHeight(), it helps to see where it sits relative to jQuery's other dimension methods:

  • height(): Measures only the content area (excluding padding, border, and margin).
  • innerHeight(): Measures the content area + top and bottom padding.
  • outerHeight(): Measures the content area + padding + border (and optionally margins if true is passed as an argument).

For example, if a <div> has a CSS height of 200px, top and bottom padding of 20px each, and a 5px border:

  • $(div).height() returns 200
  • $(div).innerHeight() returns 240 (200 + 20 + 20)
  • $(div).outerHeight() returns 250 (200 + 20 + 20 + 5 + 5)

Syntax and Usage

The method functions as both a getter and a setter (as of jQuery version 1.8).

1. Getting the Inner Height

When called without parameters on a selection, it returns the inner height of the first matched element as an integer:

var contentBoxHeight = $("#container").innerHeight();
console.log("Inner Height: " + contentBoxHeight + "px");

If used on an empty set or on the window or document objects, it returns null or the viewport/document height respectively.

2. Setting the Inner Height

When passed a value, it sets the inner height for every matched element:

// Set using a number (defaults to pixels)
$("#container").innerHeight(300);

// Set using a specific unit string
$("#container").innerHeight("25em");

When setting dimensions via innerHeight(value), jQuery adjusts the element's CSS height property so that the sum of the CSS height and padding equals the targeted value.

Common Use Cases

  • Centering Elements: Calculating accurate scroll offsets or modal placements where padding visually constitutes the body of the container.
  • Equal-Height Layouts: Dynamically standardizing container heights across a grid where elements have matching padding but variable content.
  • Scroll Position Logic: Determining when a user has scrolled to the bottom of a padded container by comparing scrollTop() with innerHeight().