我有一张flexslider幻灯片，上面有图片和特色文字的地方。在完整的网站上，它以左侧的图像和右侧的特色文本区域（浮动）开始。这两个项目都在一个黑色背景的包含div中。

当屏幕缩小时，我通过媒体查询使图像显示在顶部，特色文本区域位于其下方，两者都是100％。它们是相对的，因此它下面的内容会根据特色文本区域中的文本数量来更改位置。

第一个例子 - 最高的幻灯片

下图是具有最多文本的旋转器的示例。如您所见，图像占据顶部，绿色占据底部。您甚至看不到容器div的背景，因为内容会填满整个容器。

Example of rotator at iphone size

第二个例子 - 更短的幻灯片

此示例显示了iPhone上发生的情况。其他幻灯片仍以某种方式影响容器的高度。事实上，即使没有任何可见的链接仍然可以在该灰色区域中点击。

Second example

可能导致此问题的原因是什么？它只发生在iPhone而不是浏览器中。在浏览器上，容器调整大小，内容根据绿色区域的高度移动，但在IOS上，它采用旋转器中最大滑块的高度，即使它显示为：none。 容器的高度为auto，正在使用overflow：hidden。