-
-
Save BjornDCode/5cb836a6b23638d6d02f5cb6ed59a04a to your computer and use it in GitHub Desktop.
// 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!
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
If you have a different colored sidebar and want it to expand to the full height, add h-full
to your grid:
<div class="grid grid-cols-7 h-full">
<aside class="self-start sticky top-0 col-span-1 bg-stone-50">
// Fixed Sidebar
</aside>
<main class="col-span-6">
// Content
</main>
</div>
Nice, thank you!