2024-11-22 web, development, javascript

Sticky Footer

By O. Wolfson

Here's a "sticky footer" in a Next.js project using Tailwind CSS. This approach ensures that the footer remains at the bottom of the viewport if the content is not tall enough to push it down. When the content exceeds the viewport height, the footer will naturally sit at the end of the page content.

jsx
// layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode,
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="flex flex-col min-h-screen">
          <NavBar />
          <div className="flex-1 p-4">{children}</div>
          <Footer />
        </div>
      </body>
    </html>
  );
}

In this setup:

The flex flex-col min-h-screen classes on the outer div ensure the layout is a flex container oriented in a column direction and at least as tall as the viewport.

The flex-1 class on the main tag allows it to grow and occupy any available space, pushing the Footer to the bottom if the content is not tall enough.