使div高度在页面调整大小时响应

Question

我有一个响应滑块与全屏图像。当我调整页面大小时图像保持响应但问题Im running into is that the parent div stays to the original height and I get very big white space and I dont知道解决问题的方法。对不起，但我不知道如何解释这个，也许你可以从我添加的图像中找出答案。

<!-- !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。这就是当你的内容经常超过500px时阻止你的元素填满的原因。如果您希望此容器的基线高度至少为500px，请将height: 500px更改为min-height: 500px。这应该工作。