My experience with React is pretty extensive, but I am fairly new to Next.js and the layout logic is confusing me. As far as I understand, if layout.js is located under /app, it means that the layout will be applied to the entire application, which is what I want. I need to have a header that sticks to the top of the page and a footer that sticks to the bottom without being hidden when I scroll. Initially, I achieved this by placing my components in page.js. However, once I started using routing, I realized that was not the correct placement according to the documentation. Instead, they should be placed in layout.js:
import { Inter } from "next/font/google";
import "./globals.css";
import FooterComponent from "@/app/components/footer/footer.component";
import HeaderComponent from "@/app/components/header/header.component";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Solute Art Studio",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HeaderComponent/>
<main>{children}</main>
<FooterComponent/>
</body>
</html>
);
}
After moving the components to layout.js, I noticed that the header no longer sticks when I scroll. The footer remains at the bottom, but even when there is no content between the header and footer, I still have to scroll to see it. It seems like I messed up some CSS after relocating these components. What am I missing? I am using tailwind for styling. Header:
<Disclosure as="nav" className="bg-white shadow sticky top-0">...<footer className="bg-white sticky top-[100vh]">...