Next.js Discord

Discord Forum

nextjs + tailwind help

Unanswered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
so i want a navbar and footer and content in center that auto adjusts according to the screen(all three components) but everything i do feels kinda hacky

for example
1. with py- and px-
2. w-screen and h-screen this extends the page too much, i dont have enough content for that

so is there any standardized way to do this?

4 Replies

LuisLl
Ok, try this:

<div className="h-screen w-full flex flex-col">
  <header className=""></header>
  <main className="flex-1 flex flex-col"></main>
  <footer className=""></footer>
</div>
American black bear
or if header and footer have consistant height h-[100vh-<their_combined_height>]
Chum salmon
Fix it from the app/layout.tsx
The best way to go about it is to wrap the 3 elements (navbar, content, and footer) with the body with the following style:
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  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={`${geistSans.variable} ${geistMono.variable} antialiased
        flex flex-col w-full min-h-[100vh] justify-between`}
      >
        <Navbar />
        <div>
          {children}
        </div>
        <Footer />
      </body>
    </html>
  );
}
The key is this part flex flex-col w-full min-h-[100vh] mx-auto justify-between
- flex-col makes them stack vertically
- w-full making sure you can extend the background color of navbar and footer across the screen (if don't want, you can use fixed width)
- min-h-[100vh] makes it full height even if your content is shorter than the screen height
- justify-between making sure the first and last elements are at both edges of the container.