如何让Div铺满所有可用空间？基于Deno Fresh与Tailwind的布局问题

我正在制作一个索引页，期望实现指定的索引页布局效果。当前使用Deno Fresh框架，搭配Tailwind CSS进行样式开发。我的索引页代码引入了Header、Footer组件、一张图片以及Sign In孤岛组件，代码如下：

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>
);
}

相关组件代码如下：

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>
    );
}

请问如何让页面中间的Div容器铺满Header与Footer之外的所有可用空间？

要实现中间容器铺满Header和Footer之外的剩余空间，只需调整最外层容器和中间容器的Tailwind样式类，具体修改如下：

1. 调整最外层容器
   将最外层<div className={'bg-[#5C7EB5]'}>修改为：

<div className="bg-[#5C7EB5] min-h-screen flex flex-col">

• min-h-screen确保容器高度至少覆盖整个屏幕，避免内容不足时页面高度不够；
• flex flex-col设置垂直方向的弹性布局，让内部的Header、中间区域、Footer按垂直顺序排列。

2. 调整中间容器
   将中间的<div className="flex h-full gap-52 p-auto justify-center items-center">修改为：

<div className="flex flex-1 gap-52 p-auto justify-center items-center">

用flex-1替换h-full，这个属性会让中间容器自动占据Header和Footer之外的所有剩余垂直空间。

修改后的完整索引页代码：

return (
    <div className="bg-[#5C7EB5] min-h-screen flex flex-col">
        <Header active={"/"} flag={false}/>
        <div className="flex flex-1 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>
);
}

原理：垂直弹性布局中，flex-1的元素会自动填充容器内未被其他元素占据的空间，结合min-h-screen的最外层容器，就能保证中间区域始终铺满Header和Footer之间的所有可用空间。

内容的提问来源于stack exchange，提问作者Bill Kalaitzo