无法设置绝对和固定位置的背景色。

Question

当我在签到div和底部div上使用position时，我无法设置背景色，我尝试删除position，但没有得到预期的结果。我无法使用 body {background-color: red} 因为我的界面有不同的颜色。我应该怎么做？

这是我的代码

<div className="abc">
  <Grid doubling stackable className="mainGrid">
    <div className="SignInDiv">
      <Grid.Row className="titleRowSI">sign in</Grid.Row>
      <Grid.Row className="inputSpaceSI">
        <Input className="inputStyle" type="text" placeholder="User Name" />
      </Grid.Row>
      .
      .
      .

      <Grid.Row className="inputSpaceSI" style={{ textAlign: 'center' }}>
        Don't Have a Account ?
        <a className="linkStyle" href="/account">
          Create Account
        </a>
      </Grid.Row>
    </div>
    <div className="bottomDivSI">
      <a className="linkStyle" href="#">
        Privacy Policy
      </a>
      <a className="linkStyle" href="#">
        Terms & Conditions
      </a>
      <a className="linkStyle" href="#">
        Copyright
      </a>
    </div>
  </Grid>
</div>

这是我的css文件

.abc{
    background-color: tomato !important;
}

.mainGrid{
    height: 100%;
    width: 100%;
}

.SignInDiv{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50% , -50%);
    /* background-color: #B75D69; */
}

.bottomDivSI{
    position: fixed;
    margin-top: 3rem !important;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

Answer 1

疑问

当你把div设置为类 SignInDiv 其中包含一个css属性的 position: absolute 你本质上是将它从父子层次结构中移除。

因此，你的div元素的类 abc 不再继承该div的高度。因此，它的高度为 0px.

为了解决这个问题，你需要对这个div的高度进行硬编码。只需修改你的css，包括以下内容。

解决办法

.abc {
    background-color: tomato !important;
    height: 100vh;
}