为什么swiper-wrapper最终如此之大？

Question

我用swiper.js。 下面是实际的演示站点。

---

问题

下面有一个神秘的差距..

---

结果可能是由于swiper-wrapper或swiper-slide， 但为什么会这样呢？

如何适应元素？ （我该如何修复这个空间？）

---

演示网站

真正的网站是here

JSFiddle (fullscreen) JSFiddle

你能帮我个忙吗？

---

添加：当前状态

▼如果我更改浏览器的宽度或高度，它将最终覆盖下一张幻灯片。

▲当我使用Chrome的开发者工具检查时，发现内容部分的高度非常大。 （如果你看一下gif的底部，可能很容易理解。）

如何消除内容底部的额外高度？

Answer 1

这里有两件事要做：

1.正确的.wrap和#content的宽度和高度

你给它们指定的尺寸（宽度和高度用百分比和calc（））。但是你通过使用填充和边框来消耗这些值。默认情况下，填充和边框都会扩展块元素的维度。将box-sizing: border-box;添加到它们两者中，然后它们将具有您设置的宽度和高度 - 填充和边框（！但是边距）将被放入其中。

2.将max-height: 100%;添加到.swiper-container

height: auto;表示元素将获得其内部内容的高度。

如果您使用值（像素，百分比......等）设置高度（或最大高度），它将引用父项。

您也可以将overflow: hidden;而不是max-height添加到#content - 整体效果会相同 - 但限制.swiper-container的高度更有意义。

.wrap {
  box-sizing: border-box;
}
#content {
  box-sizing: border-box;
}
.swiper-container {
  max-height: 100%;
}

Working JSFiddle