Sticky Header and Footer with Tailwind
2 min read
Recently I started exploring Tailwind CSS framework. It is utility CSS framework fro building components. It gives us utility classes for creating customizable components.
If you don't know about utility CSS, check out this article from tailwind creator Adam: Utility CSS.
I had to build similar UI like Spotify where header and footer are fixed. The only middle part is scrollable.
It will be our final result:
This is our HTML code which contains a header, main and footer.
We want our max screen width of 100%. Our main block should be scrollable. Header and Footer should be stick to the same position always. We won't use
position: fixed class. We will use flexbox superpowers here.
h-screen to parent div. It will give max 100vh height.
flex-1 overflow-y-auto to the main block.
flex-1 class is giving remaining space to the main block. Header and Footer will take space based on their content size.
overflow-y-auto class give the scrollable property for the main block. Try to add lot of content in main block.
That's it :)