為什么我的主頁下面有空白區域？

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您可以查看可見性：隱藏和顯示：無之間的區別是什么？

Answer 2

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

你的代碼..

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

    }