I am working on a webpage that features a fixed menu at the top-left corner, followed by the main content. My goal is to ensure that the content appears below the menu, but since I do not know the exact height of the menu in advance (as it can vary based on the user's device or window size), setting a fixed top margin for the content is not feasible. As a result, when the page loads, the menu appears at the top and the content follows below it, with the ability to scroll the content behind the fixed menu.
While one workaround involves duplicating the menu above the content as a static hidden element, I am seeking a more elegant solution.
I envision something like this:
<div id="menu">
Vertical list items go here
</div>
<div id="content">
Main content goes here
</div>
#menu {
position: fixed;
z-index: 999;
}
#content { margin-top: [height of #menu, which is unknown until the page renders] }