在浏览器中打开开发工具时，视图高度不正确

Question

背景高度是正确的，但是当我们打开控制台时，背景会向上移动，留下空白。我已经尝试过高度：100% 和高度：100vh。还是没有解决

enter image description here

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

Answer 1

在主 div 的父级上应用高度 100%，如 body、html 等。