爲什麼我的主頁下面有空白區域？

Question

我創建了一個網站，使用按鈕移動到下一頁，一切正常。除了在所有內容下都有大量空白的主頁之外。我試圖讓隱藏的溢出，但阻止按鈕，你必須點擊進入下一頁。我希望第一頁的高度等於用戶屏幕高度，如果某些內容不適合，則允許它們向下滾動。

這裏是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

這是因爲你與visibility工作......其更改爲display : block和display : none你可以看看What is the difference between visibility:hidden and display:none?

Answer 2

你必須使用display這個屬性.. 試試這個網站上的顯示性能進一步的研究.. https://www.w3schools.com/cssref/pr_class_display.asp

你的代碼..

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

    }