What Does the jQuery height() Method Calculate?

The jQuery height() method is an essential dimension tool used to retrieve or set the vertical size of elements in a web page. This article explains exactly what the height() method measures, how it interacts with the CSS box model, and how it compares to other dimension-related methods in the jQuery library.

What jQuery height() Measures

When used as a getter, $(selector).height() calculates the computed height of the element's content area only. It returns this value as a unitless mathematical number representing pixels (e.g., 300 instead of 300px).

The calculation strictly excludes:

  • Padding: Any vertical padding applied via CSS.
  • Borders: Any top or bottom borders.
  • Margins: Any vertical margins surrounding the element.
  • Scrollbars: Any horizontal scrollbar rendered inside the element.

Regardless of whether an element uses box-sizing: content-box or box-sizing: border-box, jQuery's height() method will normalize the result and return only the height of the content area.

To better understand what height() calculates, it helps to see how it fits within jQuery's suite of vertical measurement methods:

  • height(): Content height only.
  • innerHeight(): Content height + top and bottom padding.
  • outerHeight(): Content height + padding + top and bottom border.
  • outerHeight(true): Content height + padding + border + top and bottom margin.

Special Targets: Window and Document

The height() method can also measure non-element objects such as the browser window and the entire HTML document:

  • $(window).height(): Calculates the height of the browser's visible viewport. This changes dynamically as the browser window is resized.
  • $(document).height(): Calculates the total height of the full HTML document, which accounts for content extending beyond the current viewport.

Using height() as a Setter

When passed an argument—such as $(selector).height(200) or $(selector).height("200px")—the method sets the content height of all matched elements. If the element uses box-sizing: border-box, jQuery automatically handles the math so the element's actual rendered content adjusts appropriately.