Css div没有采用100%的浏览器高度

我正在将背景图像应用于我的页面。背景图像位于div元素内部，但div元素没有占据100%的浏览器高度。不过，body、html和div的所有高度都设置为100%

我也尝试过最小高度：100vh，但不起作用

下面是login.css的代码

.corporate {
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: url("../../../assets/login-new.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  margin-top: 5rem;
  width: 30vw;
  height: 75vh;
  opacity: 0.9;
}

全局样式.css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


html, body {
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  font-size: 16px;
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  max-width: 100%;
  /* min-height: 100%; */
  height: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

html文件：

<div class="corporate">
  <div class="container white z-depth-2">
    <ul class="tabs teal">
      <li class="tab col s3">
        <a class="white-text" routerLink="/register" routerLinkActive="active"
          >don't have an account? click to register</a
        >
      </li>
    </ul>
    <form class="col s12">
      <div class="form-container">
        <h2 class="teal-text">Hey there</h2>
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">email</i>
            <input id="email" type="email" class="validate" />
            <label for="email">Email</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <i class="material-icons prefix">https</i>
            <input id="password" type="password" class="validate" />
            <label for="password">Password</label>
          </div>
        </div>
        <br />
        <div style="text-align: center;">
          <button
            class="btn waves-effect waves-light teal"
            type="submit"
            name="action"
          >
            Log In
          </button>
          <br />
          <br />
          <a href="" class="password-reset">Forgot Password?</a>
        </div>

        <div class="site-wrapper-inner clearfix">
          <div class="social-login clearfix">
            <p>- or sign in with -</p>
            <div class="social-buttons">
              <ul>
                <li class="social-media-icon">
                  <a href="" class="facebook social-icon"
                    ><i class="fab fa-facebook-f"></i
                  ></a>
                </li>
                <li class="social-media-icon">
                  <a href="" class="twitter social-icon"
                    ><i class="fab fa-twitter" aria-hidden="true"></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

-或者登录到-

100%指的是父对象，因此在本例中为div，因此图像拍摄的是div高度的100%，div高度由其内容决定

• 如果您使用的材料有其独特的风格，请尝试查看材料文档或使用一些框架，因为以您尝试的方式混合样式不是一个好主意

• 调整图像大小不是一个好的做法，当高度或宽度增加时，您将失去质量

---

用您的代码编写一个基本示例，效果很好。你能分享你的工作例子吗？提供一个例子，这样我们就可以看到这个问题。哈桑，请找到下面的代码笔链接以供参考。背景图像未占据整个高度。