next.js 中的 div 高度不是 100% [重复]

Posted

技术标签:

【中文标题】next.js 中的 div 高度不是 100% [重复]【英文标题】:div Height is not 100% in next.js [duplicate] 【发布时间】: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。无需更改htmlbody#__next 元素的css。 【参考方案1】:

position: absolute; 可能对你有用

html,
body 
  margin: 0;


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

【讨论】:

以上是关于next.js 中的 div 高度不是 100% [重复]的主要内容,如果未能解决你的问题,请参考以下文章

在绝对 div 上设置高度 100%

Flex 基础 100% 在列 flexbox 中:Firefox 中的全高,而不是 Chrome

CSS设置div层充满整个网页

如何使浏览器窗口的 div 高度为 100%

html、body高度

在 D3 v4 中使 SVG 容器具有父容器的 100% 宽度和高度(而不是像素)