请帮助我解决我的问题。当我使用

h-screen

输出中的每个元素，它会在一个页面上滚动，这是我不需要的。我的页脚不在可见页面的底部，它在Outler下。如何使Outlet不将我的页脚移出可见页面？
这是我的主.jsx

import ReactDOM from 'react-dom/client';
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
import Index from './pages/Index';
import './index.css';
import ErrorPage from './pages/ErrorPage';
import Personnel from './pages/Personnel';
import NewNavbar from './components/NewNavbar';
import Footer from './components/Footer';
import Contacts from './pages/Contacts';
import About from './pages/About';

const AppLayout = () => {
    return (
        <div className=' flex justify-between flex-col bg-gradient-to-r from-zinc-900 via-zinc-700 to-zinc-900'>
            <NewNavbar />
            <Outlet  />
            <Footer />
        </div>
    );
};

const router = createBrowserRouter([
    {
        element: <AppLayout />,
        path: '/',
        errorElement: <ErrorPage />,
        children: [
            {
                index: true,
                element: <Index />,
            },
            {
                path: '/personnel',
                element: <Personnel />,
            },
            {
                path: '/contacts',
                element: <Contacts />,
            },
            {
                path: '/about',
                element: <About />,
            },
        ],
    },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

索引、关于和联系人类似

import React from 'react';

const Index = () => {
    return (
        <main className='bg-red-500 '>This is main page
        </main>
    );
};

export default Index;

正如我之前所说，Personnel.jsx的工作正如我所期望的那样，但不确定这是否正确。

import React from 'react';
import Administration from '../components/Administration';
import Teachers from '../components/Teachers';

const Personnel = () => {
    return (
        
        <div className='flex w-full flex-col'>
            <div className='w-full px-[8%] lg:mx-auto lg:max-w-7xl text-white '>
                <Administration />
                <Teachers />
            </div>
        </div>
    );
};

export default Personnel;

这两个元素中的每一个都具有：

<div className='flex min-h-screen flex-col justify-center'>