Next.js Discord

Discord Forum

Make Error component fill the remaining space.

Answered
Ichneumonid wasp posted this in #help-forum
Open in Discord
Ichneumonid waspOP
Hello, I have a navbar of unknown height. I am trying to center my Error component but whenever I do h-screen I get a scrollable page and the component extends beyond the screen as it does not take under consideration the navbar. If I do h-full it just sticks under the navbar. I need a way to have the component take the remaining space from the navbar to the bottom of the visible screen. Any ideas ? I have no idea what the navbar height is.
Answered by Plott Hound
You need to wrap both the navbar and main content area in an element with min-h-screen then do h-full on the main content area
View full answer

27 Replies

Ichneumonid waspOP
this is with h-full
This is with h-screen
I just want it to end where the screen ends while taking under consideration that there is a navbar
Plott Hound
You need to wrap both the navbar and main content area in an element with min-h-screen then do h-full on the main content area
Answer
Plott Hound
If you’re using flex then you’d use grow
Ichneumonid waspOP
I saw that as a solution however Im not using this error component anywhere. Nextjs is adding it when theres an error
so theres nothing to wrap
Plott Hound
It will be inheriting the layout file
Ichneumonid waspOP
wont that mess the rest of the pages ?
Plott Hound
How are you managing the page height in your other pages?
Ichneumonid waspOP
I guess im not ? What do you mean
I dont have more content yet so I havent seen how they behave
its the navbar and the error page for now
Plott Hound
The reason h-screen is overflowing the page is because it’s not taking into account the height of the navbar. Using h-full isn’t working because the direct parent container is not taking up the full height of the screen
So what I’m saying is you need to make sure the container has the full page height
Ichneumonid waspOP
ah it worked. I did this
<html lang="en">
  <body className={inter.className}>
      <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
      >
          <div className="flex flex-col min-h-screen">
              <Header />
              {children}
          </div>
        </ThemeProvider>
    </body>
</html>
In my layout
then just grow in the error page
What you said
now its like I wanted
Plott Hound
Awesome.
Mark this as solved please
Ichneumonid waspOP
Solved, Thanks
is there no bot ? How do I do it ?
Plott Hound
Also you might prefer min-h-dvh
@Ichneumonid wasp is there no bot ? How do I do it ?
Plott Hound
Right click my reply and it’s under apps
Thanks
Ichneumonid waspOP
Thanks as well