高さではない100％

Question

私は、サムネイル付きの垂直スライドを作成するためにSwiperと協力しています。サムネイルは素晴らしいですが、高さを指定していないにもかかわらず、スライダの高さが変わっています。私は100％に設定しようとしましたが、うまくいきません。アイデア？

参照CodePen：古き良き100％の高さの問題ああhttps://codepen.io/anon/pen/bYLxvo

var galleryTop = new Swiper('.gallery-top', { 
 
    autoHeight: true, 
 
    direction: 'vertical', 
 
    nextButton: '.swiper-button-next', 
 
    prevButton: '.swiper-button-prev', 
 
    spaceBetween: 10, 
 
    onSlideChangeEnd: function(swiper) { 
 
    var activeIndex = swiper.activeIndex; 
 
    $(galleryThumbs.slides).removeClass('is-selected'); 
 
    $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected'); 
 
    galleryThumbs.slideTo(activeIndex, 255, false); 
 
    } 
 
}); 
 

 
var galleryThumbs = new Swiper('.gallery-thumbs', { 
 
    spaceBetween: 10, 
 
    freeMode: true, 
 
    centeredSlides: false, 
 
    slidesPerView: 'auto', 
 
    direction: 'vertical', 
 
    touchRatio: 0.2, 
 
    onClick: function(swiper, event) { 
 
    var clicked = swiper.clickedIndex 
 
    swiper.activeIndex = clicked; //don't need this 
 
    swiper.updateClasses() //don't need this 
 
    $(swiper.slides).removeClass('is-selected'); 
 
    $(swiper.clickedSlide).addClass('is-selected'); 
 
    galleryTop.slideTo(clicked, 255, false); 
 
    } 
 
});

html, 
 
body { 
 
    position: relative; 
 
} 
 

 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
swiper { 
 
    width: 600px; 
 
    display: block !important; 
 
    background: red !important; 
 
} 
 

 
.swiper-container { 
 
    width: 100%; 
 
} 
 

 
.swiper-slide img { 
 
    width: 100%; 
 
} 
 

 
.gallery-top .swiper-slide { 
 
    display: inline-block; 
 
} 
 

 
.gallery-top { 
 
    width: calc(100% - 120px); 
 
    float: right; 
 
    background: blue; 
 
} 
 

 
.gallery-thumbs { 
 
    position: relative; 
 
    height: 100% !important; 
 
    width: 120px; 
 
    float: left; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background: green; 
 
} 
 

 
.gallery-thumbs .swiper-slide { 
 
    width: 75px; 
 
    height: 75px; 
 
    border: 1px solid #fff; 
 
    background-size: cover !important; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
.gallery-thumbs .swiper-slide-active { 
 
    border: 1px solid #ddd; 
 
} 
 

 
.gallery-thumbs .swiper-slide.is-selected { 
 
    opacity: 1; 
 
    border: 1px solid #ddd; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.6/js/swiper.min.js"></script> 
 
<swiper class="group"> 
 
    <!-- Swiper --> 
 
    <div class="swiper-container gallery-top"> 
 
    <div class="swiper-wrapper"> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment.jpg?v=1508592020" /> 
 
     </div> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing.jpg?v=1508592020" /> 
 
     </div> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment-box.jpg?v=1508594651" /> 
 
     </div> 
 

 
    </div> 
 
    <!-- Add Arrows --> 
 
    <div class="swiper-button-next swiper-button-white"></div> 
 
    <div class="swiper-button-prev swiper-button-white"></div> 
 
    </div> 
 
    <div class="swiper-container gallery-thumbs"> 
 
    <div class="swiper-wrapper"> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment.jpg?v=1508592020" /> 
 
     </div> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing.jpg?v=1508592020" /> 
 
     </div> 
 
     <div class="swiper-slide"> 
 
     <img src="https://cdn.shopify.com/s/files/1/0978/6390/products/balancing-treatment-box.jpg?v=1508594651" /> 
 
     </div> 
 
    </div> 
 
</swiper>

Answer 1

... HTMLとBODYあなたに100％の高さプロパティを追加

してみてください。私はいつも持っていた

html, 
body { 
    position: relative; 
    height: 100%; 
} 

最大の課題は、この問題を回避して、しかし、あなたのスライダーまでつながるDOMツリー構造を考えると、彼らはすべてが100％に拡大していることを確認しています。

あなたはそれをどう見てください。