Slider Height not flexible

I have

<div class='swiper-slide'>
    <div>Image</div>
    <div>Description</div>
</div>

Following setup for the responsive Swiper, the height no longer works. If I set height to 100%, then I get whitespace caused by the slides stacking. Height:auto , same result. It seems that a pixel value is always set, locking the height. Am I missing an option or css that allows the height to flex?

[nolimits4web]

Please understand that according to simple CSS rules element with height:100% will fit to parent’s element height. If swiper wrapped with another element then it will not work. So if swiper is a child of BODY, then this will enough:

html, body, .swiper-container {
    height:100%;
    position:relative;
}

Otherwise yes, it is better to use with script like in example of Wu4m4n, but i would recommend to enhance it with:

/* FULLSCREEN SWIPER*/
$(window).resize(function(){
    var height = $(window).height();
    var width  = $(window).width();
    $('.swiper-container, .swiper-slide').height(height);
    $('.swiper-container, .swiper-slide').width(width);
    //Add reInit, because jQuery's resize event handler may occur earlier than Swiper's one
    swiper.reInit()
})
$(window).resize();

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.