Expand div to cover all available space - tailwind-css

Question

I am trying to make an index page and I want it to have the following layout
Index page layout
I am using Deno Fresh thus I have tailwind for styling.
I have the following export for my index page that uses a footer and a header component an image and a Sign In island like so:
return (
<div className={'bg-[#5C7EB5]'}>
<Header active={"/"} flag={false}/>
<div className={"flex h-full gap-52 p-auto justify-center items-center"}>
<SignIn/>
<img src={"https://cdn-icons-png.flaticon.com/512/2974/2974498.png"}
alt={"Couldn't load image..."}
className={"w-1/4 h-1/4"}/>
</div>
<Footer/>
</div>
);
}
The components and the island are the following
Header:
export function Header({ active, flag }: Props, ) {
const menus = [
{ name: "Home", href: "/" },
{ name: "Rack Temperatures", href: "/test-header" },
{ name: "Entrees", href: "/docs" },
{ name: "Temperature Humidity", href: "/dummy"}
];
return (
<div class="sticky top-0 bg-[#28374F] w-full py-5 px-8 flex flex-col md:flex-row gap-4 mx-0">
<div class="flex items-center flex-1">
<div className="ml-1 text-2xl text-gray-50 font-bold">
<a href={"/"}>FlyMonitoring</a>
</div>
<a href={"/"}>
<img src={"https://pngimage.net/wp-content/uploads/2018/06/heisenberg-logo-png-2.png"}
alt={"Couldn't load image..."}
class={"w-12 h-12"}/>
</a>
</div>
<ul class="flex items-center gap-6">
{menus.map((menu) => (
<li>
<a
href={menu.href}
class={"text-gray-50 hover:text-blue-200 py-1 border-gray-50" +
(menu.href === active ? " font-bold border-b-2" : "")}
>
{menu.name}
</a>
</li>
))}
</ul>
<div>
{flag
? <button type={'submit'}
className={"bg-blue-600 hover:bg-blue-700 text-white rounded px-6 py-2.5"}>
Log Out</button>
: ""}
</div>
</div>
);
}
Footer:
import BrandGithub from "https://deno.land/x/tabler_icons_tsx#0.0.1/tsx/brand-github.tsx";
export default function Footer() {
const menus = [
{
title: "Device Control",
children: [
{ name: "Rack Temperature", href: "/rack-temperature" },
{ name: "Temperature Humidity", href: "/temperature-humidity" },
{ name: "Water Level", href: "/water-level" },
{ name: "Smoke", href: "/smoke" },
{ name: "Entrees", href: "/entrees" },
],
},
{
title: "Information",
children: [
{ name: "Email", href: "#" },
{ name: "Phone", href: "#" },
{ name: "Discord", href: "#" }
],
},
];
return (
<div class="bg-[#28374F] w-full flex flex-col md:flex-row w-full gap-2 md:gap-16 px-8 py-4 text-sm">
<div class="flex-1">
<div class="flex items-center gap-1">
<div class="font-bold text-2xl text-gray-50">
FlyMonitoring
</div>
</div>
<div class="text-gray-100">
Application for high security room monitoring
</div>
</div>
{menus.map((item) => (
<div class="mb-4" key={item.title}>
<div class="font-bold text-gray-50">{item.title}</div>
<ul class="mt-2">
{item.children.map((child) => (
<li class="mt-2" key={child.name}>
<a
class="text-gray-200 hover:text-blue-200"
href={child.href}
>
{child.name}
</a>
</li>
))}
</ul>
</div>
))}
<div class="text-gray-100 space-y-2">
<div class="text-xs">
Copyright © 2020<br />
All right reserved.
</div>
<a
href="https://github.com/****************"
class="inline-block hover:text-blue-200"
>
<BrandGithub />
</a>
</div>
</div>
);
}

Answer 1

Your code is unfortunately not reproducible:
Follow the below code structure:
flex flex-col
|_ h-40
|_ flex-1 👈 This fills the entire space
|_ h-60
<div class="flex h-screen flex-col bg-slate-500">
<header class="flex h-20 items-center justify-center bg-blue-600 text-6xl">Header</header>
<main class="flex flex-1 items-center justify-center bg-green-300 text-6xl">Main</main>
<footer class="flex h-40 items-center justify-center bg-yellow-400 text-6xl">Footer</footer>
</div>
tailwind-play