Javascript 高度不是100%

我正在与Swiper合作创建带有缩略图的垂直幻灯片。缩略图效果很好，但是滑块的高度很奇怪，尽管我没有指定高度。我已经试着设置为100%，但没有用。想法

见代码笔：

var galleryTop=新的Swiper（“.gallery top”{
自动高度：正确，
方向：'垂直'，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
间隔时间：10，
onSlideChangeEnd:功能（swiper）{
var-activeIndex=swiper.activeIndex；
$（galleryThumbs.slides）；
$（galleryThumbs.slides）.eq（activeIndex.addClass（'is-selected'）；
galleryThumbs.slideTo（activeIndex，255，false）；
}
});
var galleryThumbs=新的Swiper（“.gallery thumbs”{
间隔时间：10，
自由模式：对，
中心幻灯片：错误，
SlideService视图：“自动”，
方向：'垂直'，
接触比：0.2，
onClick：函数（swiper、事件）{
var clicked=swiper.clickedIndex
swiper.activeIndex=clicked；//不需要这个
swiper.updateClasses（）//不需要这个
$（swiper.slides）.removeClass（'is-selected'）；
$（swiper.clickedSlide）.addClass（'is-selected'）；
galleryTop.slideTo（单击，255，false）；
}
});
html，
身体{
位置：相对位置；
}
.小组：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
游泳运动员{
宽度：600px；
显示：块！重要；
背景：红色！重要；
}
.swiper容器{
宽度：100%；
}
.滑动滑梯img{
宽度：100%；
}
.图库顶部.滑动滑梯{
显示：内联块；
}
.画廊顶部{
宽度：计算（100%-120px）；
浮动：对；
背景：蓝色；
}
.图库大拇指{
位置：相对位置；
身高：100%！重要；
宽度：120px；
浮动：左；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
背景：绿色；
}
.图库拇指.滑动滑梯{
宽度：75px；
高度：75px；
边框：1px实心#fff；
背景尺寸：封面！重要；
显示：内联块；
垂直对齐：中间对齐；
}
.图库拇指.滑动滑梯处于活动状态{
边框：1px实心#ddd；
}
.gallery thumbs.swiper-slide.is-selected{
不透明度：1；
边框：1px实心#ddd；
}
啊，好老的100%身高问题

尝试将100%高度属性添加到
HTML
和
BODY
中

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

我一直以来面临的最大挑战是围绕这一点，但想想通向滑块的DOM树结构，确保它们都扩展到100%

看看你是怎么做的。
代码笔很有用，但请在问题中包含所有相关代码，以防他们的网站宕机-那么你的问题将无法回答。Ops！很抱歉不知道怎么做：）没问题，我编辑了你的问题，加入了一个可执行的代码片段谢谢@Rorymcrossan！我不完全确定你想要什么。你能模拟一个快速的图像，显示你想要的样子吗？