Tại sao trang chủ của tôi có không gian màu trắng bên dưới?

Question

Tôi đã tạo một trang web sử dụng các nút để chuyển sang trang tiếp theo và mọi thứ hoạt động tốt. Ngoại trừ trên trang chủ nơi có nhiều không gian màu trắng trong tất cả nội dung. Tôi đã cố gắng làm cho tràn overflow nhưng mà khối nút mà bạn phải bấm vào để đi đến trang tiếp theo. Tôi muốn chiều cao của trang đầu tiên bằng với chiều cao màn hình của người dùng và nếu một số nội dung không phù hợp thì hãy cho phép họ cuộn xuống.

Đây là 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

Điều này là do bạn làm việc với visibility ... thay đổi nó để display : block và display : none bạn có thể có một cái nhìn tại What is the difference between visibility:hidden and display:none?

Answer 2

bạn phải sử dụng thuộc tính display về điều này .. thử trang web này để nghiên cứu sâu hơn về sở hữu màn hình .. https://www.w3schools.com/cssref/pr_class_display.asp

Mã của bạn ..

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

    }