17

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

ksav
  • 20,015
  • 6
  • 46
  • 66
Mahdi
  • 356
  • 1
  • 3
  • 9
  • 3
    the body need to have height defined, not min-height – Temani Afif Oct 19 '19 at 19:19
  • 1
    Temani Afif ,thanks, with % we need height as well,yes. – Mahdi Oct 19 '19 at 20:27
  • 1
    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
  • 100vh is not without problems though, hence the introduction of lvh & svh units https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4 – ksav Feb 24 '23 at 23:07
  • I fixed by commenting out tailwinds in globals.css, otherwise all divs height was 0 /* @tailwind base;@tailwind components;@tailwind utilities; */ – S.Step Jul 29 '23 at 23:59

1 Answers1

18

position: absolute; might work for you

html,
body {
  margin: 0;
}

#__next {
  background: blue;
  position: absolute;
  inset: 0;
}
<div id="__next"></div>

Or just ensure that html, body and #__next all have height: 100%

html,
body {
  margin: 0;
  height: 100%;
}



#__next {
  background: blue;
  height: 100%;
}
<div id="__next"></div>
ksav
  • 20,015
  • 6
  • 46
  • 66