Question

我有一个带有响应式滑块的全屏图像。调整页面大小时，图像仍然可以响应，但是问题m running into is that the parent div stays to the original height and I get very big white space and I don我不知道解决该问题的方法。抱歉，但是我不知道如何解释这一点，也许您可以从我添加的图像中找出来。

<!-- !Showcase -->
  <div id="showcase">
    <i id="arrow-left" class="arrow far fa-arrow-alt-circle-left "></i>
    <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2 "></div>
      <div class="slide  slide3"></div>
    </div>
    <i id="arrow-right" class="far arrow fa-arrow-alt-circle-right "></i>
  </div>


#showcase {
  height: 500px;
  width: 100%;
  position: relative;
}

#slider {
  height: inherit;
  width: 100%;
  overflow-x: hidden;
}

.slide {
  width: 100%;
  height: inherit;
  background-size: contain !important;
}

.slide1 {
  background: url(/Core/img/lazar1.jpg) no-repeat center 10%/cover;
}

.slide2 {
  background: url(/Core/img/lazar2.jpg) no-repeat center 10%/cover;
}

.slide3 {
  background: url(/Core/img/lazar3.jpg) no-repeat center 10%/cover;
}

Answer 1

展示柜具有固定的高度，将其变为最小高度或将其删除以使容器适合其内容的

Answer 2

正如G-Cyr在他的评论中所说，您的容器元素（#showcase）的绝对高度为500px。每当您的内容经常超过500像素时，这就是阻止您的元素填充的原因。如果您希望此容器的基线高度至少为500px，请将height: 500px更改为min-height: 500px。应该可以。

页面调整大小时使div高度敏感

2 个答案: