Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

91
Views
View height is not coming right when open dev tools in browser

The background height is coming right but when we open the console the background shifts upwards leaving white space. I have tried both height: 100% AND height:100vh. Still it's not fixed

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>

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Apply height 100% on parent of main div like body,html etc.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs