jquery - 为什么我的主页下面有空白？

Question

我创建了一个使用按钮移动到下一页的网站，一切正常。除了在所有内容下方都有大量空白的主页上。我尝试 overflow hidden ，但这会阻止您必须单击才能转到下一页的按钮。我希望第一页的高度等于用户屏幕的高度，如果某些内容放不下，则允许他们向下滚动。

这是代码笔: 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?