CSS最小高度在Firefox中不起作用

Question

我正在开发一个 ReactJS 应用程序，我希望我的身体至少占据整个屏幕 - 使用 min-height: 100%，使用 height: auto 占屏幕超过 100%。这不适用于 Firefox，但可以在其他浏览器中使用。

左边是chrome，右边是firefox。

所有东西都被一个具有 body 类的 div 持有；

<div className={styles.body}>
   {this.props.children}
</div>

我的scss：

.body{
display: block;
font-family: "Ubuntu", sans-serif;
margin: auto;
height: auto;    
min-height: 100%;
width: 100%;
background:
    linear-gradient(135deg, #696D7D 22px, #FAF5E3 22px, #FAF5E3 24px, transparent 24px, transparent 67px, #FAF5E3 67px, #FAF5E3 69px, transparent 69px),
    linear-gradient(225deg, #696D7D 22px, #FAF5E3 22px, #FAF5E3 24px, transparent 24px, transparent 67px, #FAF5E3 67px, #FAF5E3 69px, transparent 69px)0 64px;
background-color:#696D7D;
background-size: 64px 128px;
}

Answer 1

你应该使用这个：

min-height: 100vh;

Answer 2

您可以使用vh 单位将div 设置为viewport 的100% 高度

.yourClass {
    height: 100vh;
}

希望它是您想要的。