html - 如何在没有固定父高度的情况下调整 div 高度以匹配兄弟 img 高度

Question

我正在尝试制作一个可滚动的 Bootstrap 列表组，它会随着兄弟图像的大小调整而调整大小。父容器没有固定高度，我不能使用 jQuery。有什么想法吗？

https://jsfiddle.net/lgants/oL0rgsqk/3/

HTML:

<div class="row carousel-container">
    <div class="carousel-image-container">
      <img class="carousel-image img-responsive" src="https://lorempixel.com/900/500?r=4">
    </div>
    <div class="carousel-list-container">
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small>Donec id elit non mi porta.</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small class="text-muted">Donec id elit non mi porta.</small>
        </a>
        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
          </div>
          <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          <small class="text-muted">Donec id elit non mi porta.</small>
        </a>
      </div>
    </div>

CSS:

.carousel {
  max-height: 500px;
  position: relative;
  display: inline-block;
  height: 100%;
}

.carousel-image-container {
  width: 60%;
}

.carousel-image {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.carousel-list-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: hidden;
  width: 40%;
}

Answer 1

在 CSS 中有一个涉及百分比填充的很酷的技巧，因为...

The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

MDN spec

您可以利用这一点来创建真正响应式的网页布局。

这是工作 [JSFiddle] ( https://jsfiddle.net/oL0rgsqk/4/ )

这是我使用的 CSS:

.carousel-container {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 0;
}

.carousel-image-container {
  width: 60%;
  padding-top: 60%;
  position: relative;
  display: inline-block;
}

.carousel-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.carousel-list-container {
  width: 40%;
  padding-top: 60%;
  position: relative;
  display: inline-block;
  font-size: 14px;
}

.carousel-list-container-scroll {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

除了在 .list-groups 周围添加一个额外的 .carousel-list-container-scroll div 以启用此设置中的滚动