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>

self-start is exactly what I was looking for. thanks!

nice thanks

Thanks my God 🙏

self-start sticky top-0 col-span-1

Thanks buddy

muchas gracias caballero c:

Thanks a million!

you are a beautiful person. thank you!

I think you will find that this works better, if you are using CSS Grid, if you replace h-screen with self-start:

<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>

thank you. <3

very good. thank you

Nice, thank you!

Thanks!

Great snippet, thanks! Would add overflow-y-scroll to the aside so if the side menu's height becomes less than the height of the viewport, there is a vertical scrollbar.

Thanks a lot. I've been wasting my time using fixed instead of using sticky

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