The background height appears correct, however, when the console is opened, the background shifts upwards creating white space. I have tried setting both height: 100% and height:100vh, but the issue persists.
Click here for image description
.main {
width: 100%;
height: 100vh;
float: left;
background: rgb(63, 63, 63);
background: radial-gradient(circle, rgba(63, 63, 63, 1) 0%, rgba(0, 0, 0, 1) 97%);
padding: 100px 0px 100px 0px;
}<template>
<section class="main">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img :src="logo" width="100%"><br><br></div>
<div class="col-md-4"></div>
</div>
<div class="disclaimer font-weight-light animated-text">
<vue-typed-js
class="d-block"
:loop="true"
:strings="disclaimer"
>
<span class="typing"></span>
</vue-typed-js>
</div>
<div class="row mt-4 pt-4">
<div class="col-md-4"></div>
<div class="col-md-4">
<form autocomplete="off" @submit.prevent="submitNewsletter">
<input type="email" name="email" id="email" v-model='enteredEmail' ref='enteredEmail' placeholder="Enter Your Email" class="sub-feild">
<center>
<div class="mt-2">
<p class="error-message">{{errorMessage}}</p>
</div>
</center>
<center><button type="submit" class="cross_line">Subscribe</button></center>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
</template>