Div 不会在包含 CSS 查询的幻灯片中垂直调整大小

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 样式时不会物理移动。这意味着该元素的占用 space 仍将保留在该位置。

因此，要解决此问题，请删除 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，这非常有用，如果使用得当，不太可能出现问题。

Div 不会在包含 CSS 查询的幻灯片中垂直调整大小

Div won't resize vertically in slideshow with CSS queries

html

css

responsive-design

media-queries