光滑的旋转木马 - 解决底部边缘问题

Question

我正在尝试使用光滑和柔性框架来构建全屏，响应式，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; 
}