Expand div to cover all available space

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/[email protected]/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