Full screen layout with scrollable element in the middle

Question

I'm trying to create a layout where the whole screen is used.

The header section should always be visible at the top. The footer section should always be visible at the bottom. The search section should appear just above the footer. The content section should take up the remainder of the space and show a right-hand scrollbar if the content overflows.

<div class="flex min-h-screen flex-col">
  <div class="flex flex-grow flex-col bg-gray-100" id="inner">
    <div class="border-spacing-1 border p-2 text-center">Header</div>

    <div class="max-h-[calc(100vh-11rem)] flex-grow overflow-auto" id="content">
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
      <div class="p-4 text-center">Item</div>
    </div>
    <div class="border-spacing-1 border p-2 text-center" id="search">Search Box</div>
  </div>

  <div class="mt-auto border-spacing-1 border p-2 text-center" id="footer">Footer</div>
</div>

This sort of works, but with a horrible hard-coded calculation for the content height. Is there a tailwind way of making the max-h of content always fit the available space?

Fernando SA · Accepted Answer · 2024-01-27 19:32:36Z

1

You can achieve what you want with just one flex container and several children. Use h-screen on the container instead of min-h-screen to force overflow.

<div class="h-screen flex flex-grow flex-col bg-gray-100" id="inner">
  <div class="border-spacing-1 border p-2 text-center">Header</div>

  <div class="grow overflow-auto" id="content">
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
    <div class="p-4 text-center">Item</div>
  </div>

  <div class="border-spacing-1 border p-2 text-center" id="search">Search Box</div>

  <div class="mt-auto border-spacing-1 border p-2 text-center" id="footer">Footer</div>
</div>

P.S: Copy my code in https://play.tailwindcss.com/ to see the result yourself.

edited Jan 27, 2024 at 19:32

answered Jan 26, 2024 at 10:11

Fernando SA

1,2251 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Over a year ago

Thanks so much for your reply! The only thing this misses is if there are less items then the search box is no longer at the bottom. I'm trying to get the content element to always fit the available space if possible.

Fernando SA Over a year ago

@Ben I added grow class to content div. It should now grow even with fewer elements

Fernando SA Over a year ago

@Ben Did my latest update solve your problem?

Ben Over a year ago

I'm so sorry I only just saw your reply about adding grow! In the end I had to do something else, but it certainly works in the example you did for me. Thanks so much for your help.

Collectives™ on Stack Overflow

Full screen layout with scrollable element in the middle

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related