Fixed sidebar - scrollable content

#tailwindcss #css #webdev

A simple Tailwind layout to create a sticky sidebar and scrollable content next to it.

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

    <main>
        // Content
    </main>
</div>

Top comments (5)

Daniel Dasaolu • Jun 15 '22

Thank you, sticky worked for me

Luis F. Franco • Feb 3 '22

How do I do exactly the opposite?
I want a scrollable sidebar and a "sticky" content
I have:

<div class="flex w-full">
    <aside class="h-screen">
        ...
    </aside>
    <div class="sticky top-0 h-screen">
        ...
    </div>
</div>

But actually this thing scrolls the main content along with the sidebar

Mehdi Tayebi • Oct 5 '23 • Edited

Thank you, but not worked for me :(

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

another code :

<div class="grid grid-cols-1 md:grid-cols-12 gap-5">
      <div class="md:col-span-8 lg:col-span-9">
            <article>
                   //main content
            </article>
      </div>
      <aside class="md:col-span-4 lg:col-span-3 ">
            <div class="sticky top-5">
                  // widget Sidebar
            </div>
      </aside>
</div>

Not worked !