next.js 中的 div 高度不是 100%

Question

我在 next.js 中样式化页面时遇到问题。我想要全高页面。

因此，我在 body 和 html 标签中设置了 height 属性，没关系，我有 body 和 html 标签的全高（在开发工具中证明），但是虽然我将 #__next height 设置为 100%，但我无法实现全高它。如果我应用其他测量值，如 px 或 vh，它会受到影响。

布局文件

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
}

Answer 1

position: absolute;可能适合你

html,
body {
  margin: 0;
}

#__next {
  background: blue;
  position: absolute;
  inset: 0;
}

<div id="__next"></div>

或者只是确保html,body并且#__next所有人都有height: 100%

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



#__next {
  background: blue;
  height: 100%;
}

<div id="__next"></div>