Full height without scroll bars (using NextJS13 layout)

Answered

Dovekie posted this in #help-forum

DovekieOP

2023-09-25T05:56:22.000Z

Hello everyone. So I'm wondering how I could achieve the thing I mentioned in the title. I've been trying to work with h-full etc but I either get scroll bars or the content doesnt fit the screen. Any ideas ?

Here is my code:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className="h-full">
        <Navbar/>
        {children}
      </body>
    </html>
  )
}

Navbar:

const Navbar = () => {
  return (
    <>
      <div className="bg-primary">
    <div className="text-2xl px-8 py-6 text-white">My app</div>
      </div>
    </>
  );
};

export default Navbar;

Answered by Dovekie

I've found a solution tho, I just changed the height of the navbar from full -> full -80px and it works

View full answer

7 Replies

riský

2023-09-25T05:58:34.000Z

Try min-h-screen and keep h-full

DovekieOP

2023-09-25T06:01:24.000Z

where exactly should I use min-h-screen instead ?

riský

2023-09-25T06:02:55.000Z

Where ever you want the full height

DovekieOP

2023-09-25T06:06:45.000Z

I tried it, still same thing :/

DovekieOP

2023-09-25T06:07:12.000Z

I've found a solution tho, I just changed the height of the navbar from full -> full -80px and it works

Answer

DovekieOP

2023-09-25T06:07:21.000Z

Thanks for your time tho

riský

2023-09-25T06:08:10.000Z

Ahh I misunderstood your question, but glad to see you found the solution