CSS min-height在firefox中不起作用

Question

我正在开发一个ReactJS应用程序，我希望我的身体至少占据整个屏幕 - 使用最小高度：100％，高度：自动来说明屏幕超过100％。这在firefox中没有用，但在其他浏览器中工作。

左边是chrome，右边是firefox。

一切都是由一个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的高度.yourClass { height: 100vh; }

{{1}}

希望这就是你要找的东西。