div Height is not 100% in next.js

Question

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
}

If you only need to make sure that a `div` has at least the size of the viewport, you can make the `div` css with `min-heigth: 100vh;`. There's no need to change the css of the `html`, `body` and `#__next` elements. — Lucas Basquerotto, Jul 29 '21 at 18:54

ksav · Answer 1 · 2021-06-02T22:56:12.750

9

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>

edited Jun 02 '21 at 22:56

answered Oct 19 '19 at 16:15

ksav

17,081
6
38
60

Absolute position must be always avoided, and your example specifies top, left, right and bottom, all; so content is meant to overflow in case it fills the container – SnazzyMohit Apr 11 '22 at 19:39
@SnazzyMohit Can't the child content overflow? – ksav Apr 12 '22 at 02:39
Yes, why not, but it's a poor design choice though... In the future, adding scrollable divs or changing the background color will make the page look bad – SnazzyMohit Apr 12 '22 at 12:12

div Height is not 100% in next.js

1 Answers1