如何制作向下滚动动画以跟随屏幕高度

Question

我正在尝试使我的向下滚动动画跟随屏幕高度。现在它是固定位置，但是我希望它在调整屏幕高度和在智能手机上打开时仍在最底端时调整大小以响应。刚才提到，它只需要适合页面顶部的屏幕尺寸，因为我的网站是一个单独的主页，当我向下滚动页面时，它会回到那里。我找不到我想念的东西，我尝试了不同的姿势也没有帮助，并且保证金最高：15％也没有帮助。请

<div class="bottom-line">
  <div class="scroll-downs">
    <div class="mousey">
     <div class="scroller"></div>
    </div>
  </div>
 <div class="front-quote">the beauty in simplicity</div>
</div><!-- ./bottom-line -->

.bottom-line {
text-align: center;
width: 100%;
margin: auto;
position: absolute;
top: 643px;
}

.scroll-downs {
width: 34px;
height: 55px;
margin: auto;
}

.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #272727;
  border-radius: 25px;
  opacity: 0.75;
  -webkit-box-sizing: content-box;
   box-sizing: content-box;
}

.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #272727;
  -webkit-animation-name: scroll;
      animation-name: scroll;
  -webkit-animation-duration: 2.2s;
      animation-duration: 2.2s;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
      animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    opacity: 0;
  }
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(0);
        transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    opacity: 0;
  }
}