Html Div-won'；t使用CSS查询在幻灯片中垂直调整大小

我正在制作并尝试让幻灯片在平板电脑和移动设备上以媒体查询的宽度正确显示。但是，所有滑块容器元素都将其高度设置为590px，这将在滑块及其内容下方创建一个较大的间隙。我不相信任何元素都有固定的高度集，但我在这里和那里使用了一些

max height:590px

。有没有想过如何消除这个间隙并强制容器正确调整大小

滑块使用Cycle2

一些HTML代码

作为参考，是预期的行为

---

ETA：添加了一些我认为很重要的代码？

在您的

幻灯片中。您有一个
顶部：-200px
，这是问题的原因。与
边距
不同，设置
顶部
或
左侧
样式时，具有
位置：相对
的元素不会实际移动。这意味着该元素占用的空间仍将保留在该位置上

因此，要解决此问题，请删除
top:-200px
，并替换为
margin top:-200px

来自此：

.slidercaption {
  position: relative;
  top: -200px;
}

.slidercaption {
  margin-top: -200px
}

.slidercaption {
  position: relative;
  top: -200px;
}

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

对此：

.slidercaption {
  position: relative;
  top: -200px;
}

.slidercaption {
  margin-top: -200px
}

.slidercaption {
  position: relative;
  top: -200px;
}

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

请注意，在css中，该元素中设置了
边距：0
。确保更新将覆盖该现有样式

更新：

.slidercaption {
  position: relative;
  top: -200px;
}

.slidercaption {
  margin-top: -200px
}

.slidercaption {
  position: relative;
  top: -200px;
}

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

一个更好的解决方案是使用
position:absolute
，因为具有负的保证金或头寸更可能会产生具有如此巨大价值的问题

所以

发件人：

.slidercaption {
  position: relative;
  top: -200px;
}

.slidercaption {
  margin-top: -200px
}

.slidercaption {
  position: relative;
  top: -200px;
}

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

至：

.slidercaption {
  position: absolute;
  bottom:0;
}

那么导致以下元素上升的原因是：

#sliderNav {
  margin-top: -190px;
}

将其更改为：

.slidercaption {
  position: relative;
  top: -200px;
}

.slidercaption {
  margin-top: -200px
}

.slidercaption {
  position: relative;
  top: -200px;
}

#sliderNav {
  position: absolute;
  bottom: 168px;
  z-index: 99;
  width: 100%;
  margin: 0;
}

当您使用较大的负值时，您可以改为使用，这非常有用，如果使用得当，不太可能出现问题。
这解决了问题（谢谢！）但是创建了一个新的调用框-滑块下方的调用框跳到了新内容的顶部，因为容器现在塌陷得太多了（与以前的问题相反！）有什么想法吗？-非常感谢-现在我只需要完成平板电脑和手机视图中点的位置@史蒂维酷！很高兴听到。快乐编码：）我的定位又出现了另一个问题（说真的，这是我存在的祸根）。在768和550px宽度之间，
#sliderNav
中的滑块导航点将无法保持在黄色框中标题上方的正确位置。其他宽度的工作。有什么想法吗@Stevie我注意到这个问题是因为
max height:590px#滑块
元素上进行编码。当你移除这些点时，当你调整大小时，这些点将保持正确。我还注意到在
.slidercaption
上，您得到了一个固定的高度和最小高度
250px
。我认为最好是将高度设置为自动，然后设置填充以创建间距。-当然，也许你有这样做的理由，那么你可以忽略我的建议。