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。无需更改html
、body
和#__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% [重复]的主要内容,如果未能解决你的问题,请参考以下文章