Next.js Discord

Discord Forum

Header takes space from main content

Unanswered
European imported fire ant posted this in #help-forum
Open in Discord
European imported fire antOP
I have a header and my main content. I have set it so the main content takes up the full height of the page. However since the header takes some of the space, the content is pushed down out of the screen by the height of the header thus creating a scrollable effect for the entire page. How can I make sure that when the textarea takes full height, it takes only whats left after the header takes its height.

4 Replies

LuisLl
I have it set up like this, see if it works for you.
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className="scroll-smooth antialiased"
      suppressHydrationWarning
    >
      <body
        className={cn(
          geist.variable,
          geistMono.variable,
          "flex min-h-svh flex-col font-mono",
        )}
      >
        <Providers>
          <div className="flex flex-1 flex-col">
            <Navbar />
            <main className="isolate grid flex-1">{children}</main>
            <Footer />
          </div>
        </Providers>
      </body>
    </html>
  );
}
With this, adding or removing the header or footer (or both) won't affect the distribution of the page filling the rest (the whole page if there's nothing more). They will all share the min-h-svh in my case, if they grow too big to fit in only 100vh then the scroll appears
LuisLl
@European imported fire ant did it help?
European imported fire antOP
i solved it by hacking around with different tailwind classes so i didnt get to test this