如何在translateY后摆脱div下方的空白

Question

在我制作动画和翻译后，我试图摆脱空白。 也许将身体高度设置为自动？ translateY 是否在底部留有边距，或者只是正文空白，我无法在检查中单击它。 这是我在codepen 中的代码。 空白是在我最后一个 div 之后，我附上了我的代码和关键帧。

body{
padding: 0;
margin: 0;
overflow-x: hidden;
}

.banner{
position: relative;
transform:  scale(1.5);
background: url(../image/splashing.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;

animation: slides 1s;
animation-delay:2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0,0,0,1);
animation-fill-mode:forwards;
 -webkit-animation:slides 1s;
 -webkit-animation-delay:2s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: cubic-bezier(0,0,0,1);
 -webkit-animation-fill-mode: forwards;
}

.header h1{
display: block;
position: absolute;
bottom: 15vh;
left: 0;
}

.header{
position: relative;
color: white;
opacity: 0;
animation: Fade 1s;
animation-delay: 3s;
animation-timing-function:  cubic-bezier(0,0,1,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;

 -webkit-animation-iteration-count: 1;
 -webkit-animation: Fade 1s;
 -webkit-animation-timing-function: cubic-bezier(0,0,1,1);
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode: forwards;
z-index: 999;
}

.orange{
background-color: orange;
animation: up .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;

-webkit-animation: up .5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}

@-webkit-keyframes slides{
0%{
    -webkit-transform: scale(2,2);
}
100%{
    -webkit-transform: scale(1,1); 
}
}

@-webkit-keyframes Fade{
from{
    opacity: 0;
}
to{
    opacity: 1;
}
}

@-webkit-keyframes up{
from{
    -webkit-transform: translateY(0);
}
to{
    -webkit-transform: translateY(-30%);
}
}

Answer 1

使用位置：绝对； 在课堂上橙色会解决问题