'div Height is not 100% in next.js [duplicate]

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
}

HTML DOM

htmlcssnext.js


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions