Revision history [back]

You can use the "flex" and "flex-grow" classes to make a div occupy the remaining height of its parent div.

Here's an example:

<div class="h-screen flex flex-col">
  <div class="bg-blue-500 h-20">Header</div>
  <div class="bg-red-500 flex-grow">Content</div>
  <div class="bg-green-500 h-20">Footer</div>
</div>

In this example, the parent div has a height of the screen size (h-screen class) and uses the flex layout (flex and flex-col classes). The three child divs have different colors to show their position.

The second child div (with the red background) uses the "flex-grow" class, which makes it occupy the remaining space in the parent div. The other two child divs have fixed heights, but the second child div grows or shrinks to fill the remaining space.

You can adjust the heights of the child divs as needed to get the desired layout.