div is not taking 100% browser height [duplicate] - css

Question

This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 3 years ago.
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 />
Forgot Password?
</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.