刷卡包装程序为什么变得如此之大？

Question

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

---

问题

下面有一个神秘的缺口。

---

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

如何适合这个元素？ （如何修复此空间？）

---

演示站点

真实站点为here

JSFiddle (fullscreen)
JSFiddle

你能帮我一下吗？

---

添加：当前状态

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

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

如何消除内容底部的多余高度？

Answer 1

这里有2件事要做：

1。。正确设置。wrap和#content

的宽度和高度。

您给他们指定的尺寸（宽度和高度以及百分比和calc（））。 但是，然后您可以通过使用padding和border扩展这些值。 默认情况下，块元素的填充和边框均扩展尺寸。 将box-sizing: border-box;都添加到它们中，然后它们将具有您设置的宽度和高度-填充和边框（！但也不是边距）将放置在其中。

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

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

如果您将高度（或最大高度）设置为一个值（像素，百分比等），它将引用父级。

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

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

Working JSFiddle