Footerを下に固定する。スペースを空ける。

    <div className="max-w-screen-lg mx-auto w-full h-screen">
    <ThemeProvider
    attribute="class"
    defaultTheme="system"
    enableSystem
    disableTransitionOnChange
    >
      <Header />
      <Outlet />
      <Footer />
    </ThemeProvider>
      
</div>

親要素にh-screenをつける

import { Link } from "@remix-run/react";

export default function Component() {
  return (
    <footer className="top-full sticky">
      <div className="container mx-auto flex flex-col items-center justify-between gap-4 md:flex-row h-100 pb-10">
        <p className="text-sm">© 2024 Acme Inc. All rights reserved.</p>
        <nav className="flex items-center gap-4">
          <Link
            className="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
            to="/"
          >
            Home
          </Link>
        </nav>
      </div>
    </footer>
  )
}

子要素に
footer className="top-full sticky"

をつける