无法设置固定位置的背景颜色

Question

当我在登录div和底部div中使用位置时，我无法设置背景色。我试图删除位置，但未提供预期的结果。我不能使用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

问题

[当使用包含SignInDiv的css属性的类position: absolute设置div时，实际上是将其从父/子层次结构中删除。

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

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

解决方案

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