How can I ensure that a div element in Webflow has the same height as the entire HTML document, even after exporting the code?

To make a div element match the full height of the HTML document in Webflow and preserve that behavior after exporting the code, you need to control its height dynamically using CSS and avoid relying solely on viewport units.

1. Understand Why 100vh May Not Work

• 100vh sets the height relative to the viewport, not the full scrollable height of the document.
• If your page is longer than the viewport, the element will still only be one screen tall.

2. Use Custom CSS to Match Document Height

• Webflow does not natively support setting an element’s height to the full scroll height.
• You will need to apply custom code that calculates the document height and applies it to the div.

3. Add a Unique ID or Class to the Div

• Give your div a unique ID (e.g., full-height-div) or a unique class (e.g., full-doc-height).
• This helps target it with JavaScript after exporting.

4. Inject Custom JavaScript Before the Closing Tag

• Add the following inside a

  ```

• This will dynamically set the div’s height equal to the total scrollable height of the HTML document.

5. Test After Export

• After exporting the code, verify in your browser that the div’s height stretches to the full document length.
• Use dev tools (F12) to inspect the div's computed height and see if it matches the document height.

6. Optional: Add overflow: hidden or positioning

• Depending on usage, you may need to set overflow: hidden, position: absolute, or similar styles to achieve the layout you want.
• Do this in Webflow before export or manually in the external CSS.

Summary

To make a div element match the full HTML document height in Webflow after export, assign it a unique ID or class, then use custom JavaScript to set the height dynamically to document.documentElement.scrollHeight. Viewport units like 100vh are not sufficient for this purpose.