-
-
Save dmurawsky/d45f068097d181c733a53687edce1919 to your computer and use it in GitHub Desktop.
| const FullHeightPage = () => ( | |
| <div> | |
| Hello World! | |
| <style global jsx>{` | |
| html, | |
| body, | |
| body > div:first-child, | |
| div#__next, | |
| div#__next > div { | |
| height: 100%; | |
| } | |
| `}</style> | |
| </div> | |
| ) |
Gold. Thank you!
Cool! thanks
Many thanks!
thanks :P
true life saver
Thanks! PS: Just trying to be cool like everyone else xD
THANK YOU.
Attn Everyone Else: Don't be like me. Don't look at a bunch of other posts and then come back to this 4 hours later to realize this was the answer all along. Just stay here and use it.
Something that helped me (I'm using react-bootstrap):
The inline jsx style tag confused me. I added an import for global.css to _app.js. Add it last so it overrides any themes.
import 'bootstrap/dist/css/bootstrap.min.css';
import "../styles/sb-admin-2.css";
import '../styles/globals.css'
Then I copied and pasted OP's code to the globals.css file.
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
}
Thx!
King shit
What do you think about this? Which one is better?
<html>
<body>
<div id="container">
</div>
</body>
</html>#container {
width: 100vh;
height: 100vh;
}
Nice, thanks you so much!
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.
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
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%;
}
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
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
Amazing! Thank you!