光滑的旋轉木馬 - 解決底部邊緣問題

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; 
}