Skip to content

Instantly share code, notes, and snippets.

@dmurawsky
Last active February 4, 2024 17:20
Show Gist options
  • Star 106 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save dmurawsky/d45f068097d181c733a53687edce1919 to your computer and use it in GitHub Desktop.
Save dmurawsky/d45f068097d181c733a53687edce1919 to your computer and use it in GitHub Desktop.
How to make a page full height in Next.js
const FullHeightPage = () => (
<div>
Hello World!
<style global jsx>{`
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
}
`}</style>
</div>
)
@AgustinSTC
Copy link

Nice, thanks you so much!

@ludwignagelhus
Copy link

What do you think about this? Which one is better?

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>
#container {
  width: 100vh;
  height: 100vh;
}

100vh works poorly on mobile.

@dmurawsky
Copy link
Author

What do you think about this? Which one is better?

<html>
  <body>
    <div id="container">
    </div>
  </body>
</html>
#container {
  width: 100vh;
  height: 100vh;
}

The problem is that Next.js puts divs at the root

@ludwignagelhus
Copy link

ludwignagelhus commented Nov 12, 2022

The problem is that Next.js puts divs at the root

Which these lines from the answer should solve:

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

@aditodkar
Copy link

aditodkar commented Jan 4, 2023

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

@dmurawsky
Copy link
Author

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?

@seungwonleee
Copy link

thanks a lot!

@rodobkn
Copy link

rodobkn commented Mar 16, 2023

thanks

@MattyMags
Copy link

❤️

@MarshallGrandik
Copy link

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??

@dmurawsky
Copy link
Author

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

@Celludriel
Copy link

I had to do this to fix it

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

@MarshallGrandik
Copy link

MarshallGrandik commented Apr 24, 2023

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%') :-(

@amrhassab
Copy link

what about the main tag?

@dmurawsky
Copy link
Author

what about the main tag?

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

@s-alad
Copy link

s-alad commented Feb 4, 2024

goat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment