How to make a page full height in Next.js

index.js

const FullHeightPage = () => (
  <div>
    Hello World!
    <style global jsx>{`
      html,
      body,
      body > div:first-child,
      div#__next,
      div#__next > div {
        height: 100%;
      }
    `}</style>
  </div>
)

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

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

to globalstyle.css and importing global styles in _app.js did not work for me. Any idea what I am missing? cc: @jacksonkeating

What version of next are you using?

thanks a lot!

thanks

❤️

guys a little help over here
coding all day but a tiny HEIGHT 100% makes you freeze
I forced __next to have height 100% and body and HTML and every f else but
still sticky nav problem remains and backColor issue
any thoughts??

Hi Marshall, in order to help we need more info. Can you share your code publicly or invite dmurawsky to your repo?

I had to do this to fix it

html, body, body > div:first-child, div#__next, div#__next > div { margin: 0; }

Hi Marshall, in order to help we need more info. Can you share your code publicly or invite dmurawsky to your repo?

tnx for your response but I decided to use Vh
and yet am still thinking about my EX (height:'100%') :-(

what about the main tag?

what about the main tag?

What version of next are you using and do you have anything in _app?

goat