Skip to content

Instantly share code, notes, and snippets.

@dmurawsky
Last active April 22, 2025 13:06
Show Gist options
  • Select an option

  • Save dmurawsky/d45f068097d181c733a53687edce1919 to your computer and use it in GitHub Desktop.

Select an option

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>
)
@MattyMags

Copy link
Copy Markdown

❤️

@MarshallGrandik

Copy link
Copy Markdown

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
Copy Markdown
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
Copy Markdown

I had to do this to fix it

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

@MarshallGrandik

MarshallGrandik commented Apr 24, 2023

Copy link
Copy Markdown

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
Copy Markdown

what about the main tag?

@dmurawsky

Copy link
Copy Markdown
Author

what about the main tag?

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

@s-alad

s-alad commented Feb 4, 2024

Copy link
Copy Markdown

goat

@almogzur

Copy link
Copy Markdown

Thank you SO MUTCHHH

@tiagossa1

Copy link
Copy Markdown

Thanks!

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