Search code examples
csslayoutheighttailwind-css

Tailwind CSS list with Static header and footer with Scrollable Area in middle

I am trying to create a dashboard layout that is a 3 column using Tailwind CSS.

I have - Header on the top, List in middle, and Button at the bottom position. I want the entire component's height not greater than the screen height. In other words, my columns should have a max height of screen height.

Coming to each column, I want a list to be scrollable between header and footer still maintaining that the combined height of the header, footer, and the list should not exceed the screen height.

I am trying to do that using Tailwind CSS but I will be okay if someone can redirect me using regular css as well.

Solution

  • h-screen and flex flex-1 is what you should be focusing on. See demo.

    <div class="h-screen flex flex-col">
  <header class="flex h-10 bg-gray-200">Header</header>

  <div class="flex flex-1 bg-gray-100 overflow-auto">
    Long Content
  </div>

  <footer class="flex h-10 bg-gray-200">Footer</footer>
</div>