Javascript 为什么泳衣会变得这么大？

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

---

问题 下面有一个神秘的缺口

---

这可能是由于

swiper包装器

或

swiper幻灯片

，
但为什么会发生这种情况

如何使其适合该元素？（如何修复此空间？）

---

演示站点 真正的网站是

你能帮我一下吗

---

Add:当前状态 ▼ 如果我更改浏览器的宽度或高度，它将被下一张幻灯片覆盖

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

---

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

这里有两件事要做：

1.正确的宽度和高度。

wrap

和

#content

您可以为它们指定尺寸（宽度和高度以及百分比和计算（）。 但是，然后通过使用填充和边框来扩展这些值。 默认情况下，填充和边框都可以扩展块元素的尺寸标注。 添加

框大小：边框框，然后它们将具有您设置的宽度和高度-填充和边框（！但不包括边距）将放在它们内部

2.添加<代码>最大高度：100%至
.swiper容器
高度：自动
表示元素将获得其内部内容的高度

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

您还可以添加
溢出：隐藏
而不是
#content
的最大高度-总体效果相同-但限制
.swiper容器的高度更合理

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

非常感谢！哦，我明白了。当然，较低的空间已经消失了！不过，你能再帮我一些忙吗？现在，如果我更改浏览器的宽度或高度，它将被下一张幻灯片覆盖。当我使用Chrome的开发者工具进行检查时，发现内容部分的高度非常大。我想改变Flexbox，但如何消除内容底部的额外高度？（我在问题中添加了当前情况。请看一看。）这是否提供了您要查找的内容？：/*摆脱出现在#content element*/#content{overflow-y:hidden；}上的讨厌的垂直滚动条。swiper容器{高度：100%；最大高度：100%；}幻灯片的高度正确。问题仍然在于ech幻灯片的内容。当你们把屏幕缩小时，它们只是比屏幕高一些，因为它们并没有被隐藏，所以它们是重叠的。可以设置溢出：隐藏；对于每一张.swiper幻灯片，内容都会消失，但不会重叠。正确的做法是确保每张幻灯片的内容都是响应性的，并且总是放在一个设备屏幕上。我认为从逻辑上讲，甚至不可能有三张幻灯片，有时还可以100%地移动幻灯片。。但是当它们变长的时候。。。你怎么看呢？？滑动第一张幻灯片一次，直到它的末端可见，然后滑动到第二张幻灯片？这毫无意义。。如果您无法使内容具有响应性，请为移动设备使用一个长页面。无论如何我的解决方案适用于台式机