光滑的旋转木马 - 有助于去除底部边缘

Question

我正在尝试使用Slick和flexbox构建全屏，响应式3幻灯片轮播。

每张幻灯片都是这样的：

<div class="carousel-slide">
    <div class="carousel-yellow flexbox-column flexbox-space-between">
       <div class="title-container flexbox-column flexbox-center">
         <div class="carousel-title">AAA</div>
         <div class="carousel-subtitle">aaa</div>
       </div>
       <img src="img/blabla.gif" class="gif-carousel"/>
    </div>
</div>

单独拍摄每张幻灯片都有一个很好的布局，但是只要我打电话

$('.intro-carousel').slick({
  arrows:false,
  infinite:false,
  slidesToShow: 1,
  slidsToScroll: 1,
})

幻灯片不再是全屏，每张幻灯片的底部都有一个白条。

我已尝试使用min-height和min-width以及许多其他内容，但没有取得任何成功。

这是一个JSFiddle

Answer 1

使用基于视口的单位而不是百分比：

.carousel-slide {
  height: 100vh;
}