div 没有占用 100% 浏览器高度 [重复]答案

【问题标题】：div is not taking 100% browser height [duplicate]div 没有占用 100% 浏览器高度 [重复]
【发布时间】：2019-05-24 15:17:48
【问题描述】：

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

我也尝试过使用 min-height: 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>

【问题讨论】：

用你的代码写一个基本的例子，它工作正常。你能分享你的工作示例吗？
提供minimal reproducible example 以便我们查看问题。
嗨，哈桑，LGSon，请在下面找到 codepen 链接以供参考。背景图像没有占据整个高度。 codepen.io/Dibash/pen/eaaVoN?editors=1100

标签： css angular angular-material

【解决方案1】：

100% 指的是父级，因此在本例中是一个 div，因此您的图像占用了 div 高度的 100%，而 div 高度由其内容决定。

您正在使用具有其样式组件方式的材料，请尝试查看材料文档material grid 或使用一些框架，因为以您尝试的方式混合样式不是一个好主意。
调整图像大小不是一个好习惯，当高度或宽度增加时，您将失去质量。

【讨论】：