My ultimate goal is to have a fixed, sticky menu bar at the top of my app, followed by a div/component that houses the remaining content and does not scroll itself, while still allowing sub-components the ability to scroll when necessary. I plan to build this functionality in Next JS, but I am struggling to make it work even with plain HTML/CSS. I suspect that I need to apply styles to the outermost <body> tag, but my attempts so far have been unsuccessful. I also anticipate needing to override the default Document setup as outlined in the Next documentation in order to apply styles to the <body> element. But for now, I am focusing on getting it to work in plain HTML...
If I were to write this in bad, incorrect pseudocode, it would look something like this:
<html>
<nav style="sticky to top">
<!-- Menu markup goes here. -->
</nav>
<body style="don't scroll; take up remaining page space">
<table style="overflow-y: auto">
<!-- TONS OF TABLE ROWS. -->
</table>
</body>
</html>
I tried applying overflow: hidden to various elements in a brute force attempt, but still couldn't get it to work.
I came across a helpful post on Stack Overflow, as well as a related thread, but the solutions didn't quite fit my scenario.
Here is some simple HTML that I was experimenting with (ignoring the sticky nav bar part):
<html>
<nav>
<div style="background-color: purple;">
<p>Navigation Bar</p>
</div>
</nav>
<body style="overflow:hidden">
<div style="overflow: scroll">
<table style="color: red; overflow:scroll">
<tr><td>Item 1</td></tr>
<!-- Repeat the above rows multiple times. -->
</table>
</div>
</body>
<footer>
<p>Footer Content Here</p>
</footer>
</html>
Below is the base layout for the main page using Next/React and Tailwind CSS:
const AppLayout = ({ children }) => (
<>
<header className = "sticky top-0 z-50">
<Menu />
</header>
<main id = "AppLayoutMain" className="relative bg-white antialiased overflow-hidden">
{children}
</main>
</>
);
I have tried adding styles to random elements in a disorganized manner to try and make it work, but I haven't been successful. Any guidance or a simple working example would be greatly appreciated. Feel free to use Tailwind CSS if it helps demonstrate the solution.