The **dynamic height** of the embedded frame’s displayed contents is calculated using:
```js document.body.offsetHeight ```
This is the method shown in the help page and is the most **robust cross-browser-safe** way to get the rendered height of the content in a simple HTML document.
The (`document.body.offsetHeight`) measures the **pixel height** of the `<body>` element.
It includes: - **Content height** - **Padding** - **Borders**
It excludes: - **Margins** - **Absolutely or fixed-positioned elements** outside of normal flow
# What Affects the Height? The calculated height depends on: 1. **Visible content only** * Hidden elements (`display: none`) won’t count. * Collapsed sections won’t count unless expanded before measuring. 2. **CSS box model** * Padding and border inside `<body>` count. * Margins of `<body>` don’t. 3. **Dynamic content** * If content grows (e.g. via AJAX or user interaction), the height should be recalculated and resent.
# Alternatives and Considerations If you're using **more complex layouts** or have elements that might extend beyond `<body>`, you might also consider: ```js document.documentElement.scrollHeight ``` This includes the height of the entire page content and is useful when: * You use `html { height: 100%; }` in CSS * Content may overflow `<body>` # Robust Version You can use the **maximum** of several measures to be safe: ```js function getContentHeight() { return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight ); } ``` And then send: ```js window.parent.postMessage({ action: "resize", height: getContentHeight() }, "*"); ```