I'm encountering an issue with styling pages in next.js. My goal is to create full-height pages.
Although I've successfully set the height attribute in the body and html tags to achieve full height (verified in dev tools), I'm struggling to make #__next element also occupy 100% of the viewport height. Any other unit of measurement like px or vh works, but not when I use % for #__next element.
Here's a snippet from my 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
}