4

Desired goal: I ultimately want my app to have a fixed, sticky menu bar at the top, then a div/component that contains the rest of the content and not scroll, while allowing the sub-components freedom to scroll when necessary. I will ultimately build this in Next JS, but I can't even make it work in plain HTML/CSS, so I'm unsure of the styles to apply in the Next code. I suspect that I have to apply styles to the outermost <body> tag, but nothing I tried seems to work. I also suspect that (to use Next), I will need to override the Document as they describe in the Next documentation and apply styles to <body>. But first, just in plain HTML...

If I write this in bad, incorrect pseudocode, I'm looking for:

<html>
  <nav style="sticky to top">
    <!-- Markup to render a menu. -->
  </nav>
  <body style="don't scroll; size=take up the rest of the page">
    <table style="overflow-y: auto"
      <!-- TONS OF TABLE ROWS. -->
    </table>
  </body>
</html>

I tried the brute force method of sticking overflow: hidden on just about every tag in the tree, but still nothing working.

I consulted this good post and saw this close post (with a terse answer) but didn't think the second post applied.

Here's dumb HTML that I was trying to get to work (ignoring the sticky nav part):

<html>
  <nav>
    <div style="background-color: purple;">
      <p>Nav bar</p>
    </div>
  </nav>
  <body style="overflow:hidden">
    <div style="overflow: scroll">
      <table style="color: red; overflow:scroll">
        <tr><td>Item 1</td></tr>
        <!-- Repeated the above about 20 times. -->
      </table>
    </div>
  </body>
  <footer>
    <!-- Only put this here so the page bottom is obvious; not in my app. -->
    <p>Footer here</p>
  </footer>
</html>

For what it's worth, this is the Next/React code with Tailwind that will be the base of the main page:

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 added extra tags in there with styles in random and unstructured ways, trying to hack it to work and no dice.

If someone could show me my errors, or post anything simple that works, I'd appreciate it. I use tailwindcss so you can express it that way if helpful.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
partnerd
  • 53
  • 1
  • 5

1 Answers1

1

You should be able to accomplish this by using flex-col and giving your content div overflow-hidden. Something like:

<div class="flex flex-col h-screen overflow-hidden">
  <div class="flex-shrink-0">Header content</div>
  <div class="overflow-hidden">
    <div class="w-40 max-h-full overflow-y-auto">
      Scrolling content
      ...
    </div>
  </div>
  <div class="flex-shrink-0">Footer Content</div>
</div>

See it in action: https://play.tailwindcss.com/bxUwAuCs8R (shrink the screen vertically to see the scroll bar).

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
  • Nice! Thanks Ed. I knew it was simple and I was just missing it. Weird thing, though - doesn't scroll on Safari, but does on Chrome and Brave. Any idea why (other than "avoid Safari"?) – partnerd Dec 20 '21 at 19:21
  • @partnerd Sorry, but I don't have Safari on my PC...maybe play with the height settings of the innermost div? FYI, it also works in FireFox and Edge. – Ed Lucas Dec 21 '21 at 16:07