YouTip

# HTML DOM Element clientHeight Property The `clientHeight` property is a read-only property of the HTML DOM Element interface. It returns the inner height of an element in pixels. This value includes the element's height and vertical padding, but excludes its borders, margins, and any horizontal scrollbar (if present). --- ## Definition and Usage The `clientHeight` property is an integer representing the visible height of an element's content area, plus its top and bottom padding. ### How it is calculated: $$\text{clientHeight} = \text{CSS height} + \text{CSS padding-top} + \text{CSS padding-bottom} - \text{Horizontal Scrollbar Height (if visible)}$$ * **Included:** CSS height, top and bottom padding. * **Excluded:** Borders, margins, and horizontal scrollbars. * **Return Value:** A read-only integer representing the pixel value. ### Document Root Element Behavior For the document's root element (such as `` or `` depending on the rendering mode), `clientHeight` returns the viewport height (excluding any scrollbars). > **Note:** To better understand how this property works, refer to the **CSS Box Model**. > > **Tip:** This property is commonly used alongside the (prop-element-clientwidth.html) property. > > **Tip:** If you need to retrieve the visible height of an element including its padding, borders, and scrollbars, use the (prop-element-offsetheight.html) property instead. --- ## Syntax ```javascript let height = element.clientHeight; ``` ### Technical Details | Feature | Description | | :--- | :--- | | **Return Value** | An integer representing the element's inner height in pixels. | | **Read/Write** | Read-only | | **Standard** | CSSOM View Module | --- ## Browser Support The `clientHeight` property is fully supported across all major modern and legacy web browsers: | Property | Chrome | Edge / IE | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | `clientHeight` | Yes | Yes | Yes | Yes | Yes | --- ## Code Examples ### Example 1: Basic Usage The following example retrieves the height and width of a `div` element, including its padding: ```javascript // Select the element const element = document.getElementById("myDIV"); // Get clientHeight and clientWidth let height = element.clientHeight; let width = element.clientWidth; let text = "Element height (including padding): " + height + "px
"; text += "Element width (including padding): " + width + "px"; console.log(text); ``` --- ### Example 2: Comparing `clientHeight` vs. `offsetHeight` This example demonstrates the difference between `clientHeight` (which excludes borders) and `offsetHeight` (which includes borders): ```javascript const element = document.getElementById("myDIV"); let result = ""; // clientHeight: Height + Padding result += "Height including padding (clientHeight): " + element.clientHeight + "px
"; // offsetHeight: Height + Padding + Border result += "Height including padding and border (offsetHeight): " + element.offsetHeight + "px
"; // clientWidth: Width + Padding result += "Width including padding (clientWidth): " + element.clientWidth + "px
"; // offsetWidth: Width + Padding + Border result += "Width including padding and border (offsetWidth): " + element.offsetWidth + "px"; console.log(result); ``` --- ### Example 3: Behavior with Scrollbars When an element has an active scrollbar (e.g., using `overflow: scroll`), the scrollbar takes up space inside the element. `clientHeight` automatically subtracts the scrollbar's thickness, whereas `offsetHeight` does not: ```javascript const element = document.getElementById("myDIV"); let result = "Element Dimensions (with scrollbars):
"; // clientHeight excludes the horizontal scrollbar result += "Height including padding (excluding scrollbar): " + element.clientHeight + "px
"; // offsetHeight includes the horizontal scrollbar and borders result += "Height including padding, border, and scrollbar: " + element.offsetHeight + "px
"; // clientWidth excludes the vertical scrollbar result += "Width including padding (excluding scrollbar): " + element.clientWidth + "px
"; // offsetWidth includes the vertical scrollbar and borders result += "Width including padding, border, and scrollbar: " + element.offsetWidth + "px"; console.log(result); ``` --- ## Visualizing the Differences To choose the correct property for your layout calculations, refer to this quick summary: * **`clientHeight` / `clientWidth`**: Content + Padding (excludes borders, margins, and scrollbars). * **`offsetHeight` / `offsetWidth`**: Content + Padding + Borders + Scrollbars (excludes margins). * **`scrollHeight` / `scrollWidth`**: Entire content area (including parts hidden by overflow/scrollbars) + Padding.