【问题标题】:div Height is not 100% in next.js [duplicate]next.js 中的 div 高度不是 100% [重复]
【发布时间】:2020-02-16 07:37:21
【问题描述】:

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

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

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
}

【问题讨论】:

  • body 需要定义高度,而不是最小高度
  • Temani Afif,谢谢,我们也需要身高,是的。
  • 如果您只需要确保div 至少具有视口的大小,则可以使用min-heigth: 100vh; 制作div css。无需更改html、body 和#__next 元素的css。

标签: css next.js


【解决方案1】:

position: absolute; 可能对你有用

html,
body {
  margin: 0;
}

#__next {
  background: blue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div id="__next"></div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-08-08
    • 2012-09-18
    • 2012-04-07
    • 2015-07-19
    • 2014-08-01
    • 1970-01-01
    • 2014-09-20
    相关资源
    最近更新 更多