Why does my homepage have a space?

Question

I created a website that uses buttons to go to the next page, and everything works fine. In addition, on the main page, where there is a lot of free space throughout the content. I tried to make the overflow hidden, but this blocks the button that you have to click to go to the next page. I would like the height of the first page to be equal to the height of the user's screen, and if some content does not fit, let them scroll down.

Here is the code: 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

This is due to the fact that you are working with visibility ... change it to display : block and display : none , you can take a look at What is the difference between visibility: hidden and display: neither

Answer 2

you must use the display attribute. try this site for further research on property mapping .. https://www.w3schools.com/cssref/pr_class_display.asp

your code ..

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