Menu
I have a problem to stylize pages in next.js. I want to have full height pages.
Therefore, I set the height attribute in body and html tags, it is OK and I have full height for body and html tags(proved in dev tools) but although I set #__next height to 100%, I could not achieve full height for it. If I apply other measurements like px or vh, it is affected.
layout.css
html {
height: 100%;
font-size: 16px;
}
body {
min-height: 100%;
font-family: @text-font-family;
direction: rtl !important;
text-align: start !important;
}
#__next {
height: 100%; // or min-height
}
480
Height % is based on it's parent (so you have to set every element above the target element to 100%) , there are a few workarounds to this though. For instance you can set it to height: 100vh; This will create the element to be 100% of your window height. Or you can use px instead.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents. As you are floating all elents in row it has 0 height and therfore so has .
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
position: absolute; might work for you
html,
body {
margin: 0;
}
#__next {
background: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<div id="__next"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
