DEV Community

Dimer Bwimba
Dimer Bwimba

Posted on

5 2

Fixed sidebar - scrollable content

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
 
moreaujean profile image
Jean Moreau

Thanks! Exactly what I was looking for.

Collapse
 
esbanarango profile image
Esteban

👍Thank you

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay