在使用CSS查询的幻灯片中，Div不会垂直调整大小

Question

我正在处理this page并试图通过媒体查询在平板电脑和移动设备宽度上正确显示幻灯片。但是，所有滑块容器元素都将其高度设置为590px，这会在滑块及其内容下方创建一个大的间隙。我不相信任何具有固定高度设置的元素，但我在这里和那里使用了一些max-height:590px。有关如何消除这种差距并强制容器正确调整大小的想法吗？

Slider使用Cycle2。

一些HTML代码     

<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">

<div class="singleSlide">
  <!-- content goes in here -->
</div>

   

我认为一些CSS非常重要：

#homeslider {
    height: auto;
}
#homeslider, #slider img {
    width: 100%;
    height: auto;
}
#homeslider {
    width: 1090px;
    margin: 0px auto;
    max-height: 590px;
}

作为参考，this slideshow是预期的行为。

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

Answer 1

在您的.slidercaption中，您有top:-200px导致问题。与margin不同，position:relative的元素在设置top或left样式时不会实际移动。这意味着该元素的占用空间仍将保留在该位置上。

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

来自：

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

对此：

.slidercaption {
  margin-top: -200px
}

请注意，在您的CSS中，该元素中设置了margin:0。确保您的更新将覆盖现有样式。

<强>更新

更好的解决方案是使用position:absolute代替，因为具有负边距或位置更有可能导致该巨大价值的问题。

因此...

发件人：

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

收件人：

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

然后导致以下元素上升的原因是：

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

将其更改为：

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

当您使用较大的负值时，您可以使用position:absolute代替非常有用，如果使用得当，则不太可能出现问题。