jQuery .innerHeight() Method

What Is .innerHeight()?

.innerHeight() gets or sets the height of matched elements including padding, but not border or margin (getter since 1.2.6; setter since 1.8). The getter returns a unitless pixel Number.

$("div").innerHeight()        // Number → content + padding
$("div").innerHeight(100)     // set inner height to 100px
$("div").innerHeight(fn)      // per-element setter (1.8+)

.height()       → content only
.innerHeight()  → content + padding
.outerHeight()  → content + padding + border

How to Use .innerHeight()

Measure or set the padded inner box — never on window or document.

1. Select a DOM element (not window or document).
2. Call .innerHeight() with no args to read content + padding as a Number.
3. Pass a Number or CSS string to set that inner height on every match.
4. Use the callback form when each element needs a different value (jQuery 1.8+).

Pseudocode

function innerHeight(selection, value):
    if selection is empty:
        return undefined

    if value is missing:
        el = first matched element
        return contentHeight(el) + verticalPadding(el)

    for each el in selection:
        if value is a function:
            newH = value(index, currentInnerHeight)
        else:
            newH = value
        set CSS height so content + padding = newH
    return selection

Cheat Sheet

Keep these facts handy while measuring the padded box.

Live Preview

Pick an action against the padded sample box and see what .innerHeight() returns or sets.

$("#box").innerHeight()
→ 76

/* content 60 + padding 8+8 */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var p = $("p").first();

console.log("innerHeight: " + p.innerHeight() + "px");

innerHeight: 34px

(Exact number depends on font size and padding.)

var $box = $("#box");

console.log("height:      " + $box.height());
console.log("innerHeight: " + $box.innerHeight());
console.log("outerHeight: " + $box.outerHeight());

height:      60
innerHeight: 76
outerHeight: 80

$("#box").innerHeight(90);

console.log($("#box").innerHeight());  // 90

90

$(".panel").innerHeight(function (index, current) {
  return current - 8;
});

$(".panel").each(function (i) {
  console.log("panel " + i + ": " + $(this).innerHeight() + "px");
});

panel 0: 62px
panel 1: 62px
panel 2: 62px

(Starts from 70 when each panel began at innerHeight 70.)

Performance Notes

Dimension getters force layout. Read once, reuse the Number, and avoid calling .innerHeight() inside tight loops unless needed.

Key Takeaways