height is not the correct height of the parent

[frail cobalt]

In this code example u can see me adding a padding to the top of the body, based on the parent height. but the parent height changes because this menu component is loaded later, which makes the parent height larget. How can i make this work correctly?

[drifting drift]

Hi @frail cobalt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like you're dealing with a dynamic height issue. One of the users in the Github issue (https://github.com/vercel/next.js/issues/47839) mentioned a similar problem where the initial height on the first load changes. They managed to fix it by storing the initial height and forcing it back via CSS or JS.

Here's a simplified version of their solution:

1. Store the initial height of the document using document.documentElement.clientHeight in a <Script strategy="beforeInteractive"> tag in _document.tsx.
2. In a useLayoutEffect, check if document.documentElement.clientHeight has changed.
3. If it has changed, manually set your <main> element's height.

Please note that this is a general approach and might need to be adjusted based on your specific use case. For more detailed information, you might want to check the Next.js documentation (https://nextjs.org/docs) or ask for help in the Next.js community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: