Next JS page height not 100% with a Layout-CodePudding

I found some questions targeting this topic, but I still did't manage to fix my problem. I am using a Layout component in Next js which wraps around my page and contains a basic Header and a Navbar beneath (both with fixed height). My page renders under the Navbar and should take up the remaining space of the screen (I am using Tailwind CSS). I imported some global styles from other sources like this one

in globals.css

html,
body,
body > div:first-child,
div#__next,
div#__next > div {
  height: 100%;
}

and got closer to the desired result, but it does not do the trick since my Layout does its own thing and when I apply "h-full" (height: 100% in regular CSS) to my pages, they are too big of course since they have the Navbar and Header above them. I feel like the solution is pretty simple but I am working on the wrong elements or the wrong level. Should I configure my Layout component or both the Layout and the Pages? I have configured a sign-in page which doesn't include the Header but rather an empty div as a Layout and everything works fine in there. How do I manage the height of my Header and Navbar so that the Pages are "fullscreen"?

CodePudding user response：

If you have a fixed height for your header and navbar then you can define the height for the page below using css calc

height : calc(100vh - height of navbar height of header in px)

For example your css should be like this

height : calc(100vh - 50px)

CodePudding user response：

Try with 100vh (viewport height), if you still prefer to use height:100%, it should be followed by position : absolute/fixed

html,
body,
body > div:first-child,
div#__next,
div#__next > div {
  height: 100vh;
}