Warum hat meine Homepage Leerzeichen?

Question

Ich habe eine Website erstellt, die mithilfe von Schaltflächen zur nächsten Seite wechselt, und alles funktioniert einwandfrei. Außer auf der Homepage, wo unter dem ganzen Inhalt viel Platz ist. Ich habe versucht, den Überlauf zu verbergen, aber das blockiert den Knopf, den Sie klicken müssen, um zur nächsten Seite zu gehen. Ich möchte, dass die Höhe der ersten Seite der Bildschirmhöhe des Benutzers entspricht, und wenn einige Inhalte nicht passen, erlauben Sie ihnen, nach unten zu scrollen. Hier

ist die codepen: https://codepen.io/Lukie/pen/eWobYa

// If user clicks on .downBtn 
 
function scrollDown() { 
 
    $(".home").removeClass("slideInLeft"); 
 
    $(".home").addClass("slideOutUp"); 
 
    
 
    $(".content").css("visibility", "visible"); 
 
    $(".content").removeClass("slideOutDown"); 
 
    $(".content").addClass("slideInUp"); 
 
} 
 

 
// If user clicks on .upBtn 
 
function scrollUp() { 
 
    $(".home").removeClass("slideOutUp"); 
 
    $(".home").addClass("slideInDown"); 
 
    $(".home").css("visibility", "visible"); 
 
    
 
    $(".content").removeClass("slideInUp"); 
 
    $(".content").addClass("slideOutDown"); 
 
}

body { 
 
    background-color: white; 
 
    overflow-x: hidden; 
 
    transition: all .6s ease-in-out; 
 
} 
 

 
.home { 
 
    top: 0; 
 
    visibility: visible; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    visibility: hidden; 
 
} 
 

 
.logo { 
 
    margin: 4% 0 14% 0; 
 
} 
 

 
.downBtn { 
 
    position: relative; 
 
    color: orange; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.downBtn:hover { 
 
    transform: scale(1.2); 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.upBtn { 
 
    position: relative; 
 
    color: black; 
 
    margin: 4% 0 0 8%; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.upBtn:hover { 
 
    transform: scale(1.2); 
 
    cursor: pointer; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.car { 
 
    transform: scale(.8); 
 
} 
 

 
p { 
 
    font-family: Raleway; 
 
    font-size: 14px; 
 
    line-height: 180%; 
 
    color: black; 
 
    margin: 0 22% 10% 18%; 
 
    padding: 10px; 
 
    border-left: 2px solid #191a1c; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Home Page --> 
 
<div class="container-fluid home animated slideInLeft"> 
 
    <!-- Tesla Logo --> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <a href="https://www.tesla.com/" target="_blank"><img class="logo mx-auto d-block" src="http://resizeimage.net/mypic/TkJbULc2TToQO5jb/Nyv35/tesla.png" alt="Tesla Logo"></a> 
 
    </div> 
 
    </div> 
 
    <!-- Scroll Down Button --> 
 
    <div class="row"> 
 
    <div class="col-md-12 text-center"> 
 
     <i class="downBtn fa fa-5x fa-angle-down" aria-hidden="true" onclick="scrollDown()"></i> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Content Page --> 
 
<div class="container-fluid content animated slideOutDown"> 
 
    <!-- Scroll Up Button --> 
 
    <div class="row"> 
 
    <div class="col-md-12 text-left"> 
 
     <i class="upBtn fa fa-5x fa-angle-up" aria-hidden="true" onclick="scrollUp()"></i> 
 
    </div> 
 
    </div> 
 
    <!-- Car Image --> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <img class="car mx-auto d-block" src="https://www.tesla.com/tesla_theme/assets/img/modals/model-select-models.png?20160811" alt="Tesla" </div> 
 
    </div> 
 
    <!-- Paragraph about Tesla --> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <p>Tesla’s mission is to accelerate the world’s transition to sustainable energy. Since our founding in 2003, Tesla has broken new barriers in developing high-performance automobiles that are not only the world’s best and highest-selling pure electric 
 
      vehicles—with long range and absolutely no tailpipe emissions—but also the safest, highest-rated cars on the road in the world. Beyond the flagship Model S sedan as well as the falcon-winged door Model X sports utility vehicle, we plan on launching 
 
      our new Model 3 sedan later this year at a base price of $35,000 that we expect to truly propel electric vehicles into the mainstream.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Dies liegt daran, Sie mit visibility arbeiten ... ändern Sie ihn auf display : block und display : none Sie einen Blick auf What is the difference between visibility:hidden and display:none? nehmen

Answer 2

müssen Sie display Attribut auf diesem ..verwendenversuchen, diese Website für weitere Studien zur Anzeigeeigenschaft .. https://www.w3schools.com/cssref/pr_class_display.asp

Ihr-Code ..

.content { 
     //along with other codes 
     display : none; 

    }