Tailwind - Fixed sidebar, scrollable content

gistfile1.txt

// Source: https://twitter.com/calebporzio/status/1151876736931549185

<div class="flex">
    <aside class="h-screen sticky top-0">
        // Fixed Sidebar
    </aside>
    
    <main>
        // Content
    </main>
</div>

thanks a lot, works really well

This is beautiful

But, how do I make it scroll down when a scroll down is initiated

This works perfectly, but it doesn't work with a fixed navbar.
With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

This works perfectly, but it doesn't work with a fixed navbar. With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

@ruiaraujo012 Thank you so much for sharing!

This works perfectly, but it doesn't work with a fixed navbar. With a bit of research, I managed to make it work:

<nav class="fixed bottom-[calc(100vh-theme(spacing.16))] left-0 right-0 top-0 bg-blue-200">Nav</nav>

<div class="flex min-h-screen">
  <aside class="sticky top-16 h-[calc(100vh-theme(spacing.16))] w-40 overflow-y-auto bg-green-200">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </aside>

  <main class="mt-16 flex-1 bg-yellow-200">
    <p>content</p>
  </main>
</div>

What if we need to add Footer as well to this, I tries it is not working, Any Ideas !

I come back here so frequently. Thanks.

Life saver!

Thank You

Thanks

Thank you

Thank you !

<div class="grid grid-cols-7">
    <aside class="self-start sticky top-0 col-span-1">
        // Fixed Sidebar
    </aside>
    
    <main class="col-span-6">
        // Content
    </main>
</div>

This is perfect

te amo