높이가 100 %가 아닙니다.

Question

저는 미리보기로 세로 슬라이드를 만들기 위해 스와이퍼와 협력하고 있습니다. 엄지 손톱은 훌륭하게 작동하지만 높이를 지정하지 않았더라도 슬라이더는 이상한 높이를가집니다. 설정을 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 %로 확대되도록 한 있었다 가장 큰 문제.

어떻게 지내세요.