Slick Karussell - Problem beim Entfernen des unteren Randes

Question

Ich versuche ein Fullscreen, reaktionsschnelles Karussell mit 3 Dias mit Slick und Flexbox zu bauen.

Jede Folien wie folgt aussehen:

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

sich genommen jede Folie ein gutes Layout, aber sobald ich nenne

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

die Schlitten nicht mehr Vollbild und gibt es eine weiße Balken am unteren Rand jeder Folie.

Ich habe schon versucht, mit min-height und min-width und viele andere Dinge ohne Erfolg zu spielen.

hier ist ein JSFiddle

Answer 1

Verwendung Darstellungsgeräte statt prozentualer:

.carousel-slide { 
    height: 100vh; 
}