div is not taking 100% browser height

Question

I am applying a background image to my page. The background image is inside a div element, but the div element is not taking 100% browser height. Though, body, html and the div all heights are set to 100%.

I have also tried with min-height: 100vh, but not working.

Below is the code for 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;
}

the global styles.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;
}

The html file:

<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>

Answer 1

100% referes to the parent so in this case a div, so your image is taking 100% of the height of your div and the div heigth is determinate by its content.

• your are using material that have its way of style components, try to take a look at material documentation material grid or use some framework because mix style in the way you are tryng to do is not a good idea.

• resize images is not a good practice, you will lose quality when the height or width will increase.