DEV Community

Dimer Bwimba
Dimer Bwimba

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
archyscript profile image
Daniel Dasaolu •

Thank you, sticky worked for me

Collapse
 
luisferfranco profile image
Luis F. Franco •

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>
Enter fullscreen mode Exit fullscreen mode

`

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

Collapse
 
mehditayebi profile image
Mehdi Tayebi • • 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Not worked !

Collapse
 
esbanarango profile image
Esteban •

👍Thank you

Collapse
 
moreaujean profile image
Jean Moreau •

Thanks! Exactly what I was looking for.