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

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

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

Answer 2

陈列柜具有固定高度，将其变成 min-height 或将其移除以使容器适合其内容的

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

Make div height Responsive when page is resizing

css

height

responsive

auto