Question

我在容纳一些文本的容器时遇到问题，并且在其下方有一个很大的空间，我似乎无法删除。起初我以为是因为我给了slideUp动画，但删除后却遇到了同样的问题。

当页面一直滚动到顶部（在桌面屏幕的右下角，在移动设备的中心）时，文本的位置是我喜欢的，但是总是有很多空白空间可在桌面视图上向下滚动。知道如何删除它吗？

    <div class="content-container">
    <div class="cov-box">
        <p class="slide-up">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    </div>
</div>

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  background-color: black;
}


/* Screensize */


/* Mobile */

.cov-box {
  color: #ffffff;
  line-height: 1.2;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  margin: 0 15px;
  transition: 0.4s ease;
}

.cov-box.move-right {
  opacity: 0%;
}

.slide-up {
  max-width: 600px;
}

@media (min-width: 559px) {
  .cov-box {
    font-size: 2rem;
    margin: 0 30px;
  }
}

@media (min-width: 1150px) {
  .cov-box {
    width: 900px;
    text-align: right;
    position: absolute;
    font-size: 2.5rem;
    padding-top: 300px;
    right: 5px;
  }
  .slide-up {
    max-width: 700px;
  }
}

@media (min-width: 1250px) {
  .cov-box {
    font-size: 3rem;
    right: 30px;
  }
  .slide-up {
    max-width: 800px;
  }
}

@media (min-width: 1450px) {
  .cov-box {
    right: 100px;
    font-size: 3.5rem;
  }
  .slide-up {
    max-width: 900px;
  }
}


/* Header Bottom Ani */

.slide-up {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
  display: inline-block;
  animation-fill-mode: both;
}

@keyframes slideUp {
  0% {
    transform: translateY(200%);
    opacity: 0%;
  }
  100% {
    transform: translateY(0%);
    opacity: 100%;
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(200%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

<div class="content-container">
  <div class="cov-box">
    <p class="slide-up">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  </div>
</div>

不需要的容器高度

0 个答案: