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.