Html 如何削减引导列高度以匹配相邻列？

我有下面的Bootstrap4布局，它使用两列

• 左列，列中包含三张卡片
• 右列，包含列表组

列表组的内容比左侧三张卡片的内容长

如何使用引导限制列表组容器的高度以匹配包含三张卡的相邻列的高度

现在，我已经使用了CSS

max height

，但这不是一种适合我继续的方式

列表组在这里

---

注意。卡片使用。卡片img覆盖，其尺寸与内部使用的图像相同。

将它们包含在一个父级

div

中，并在该

div

上添加高度

<div id="parentDiv" style="height: 350px">
<!-- Left column -->
<div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">

  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
        <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
          First card is here.
        </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Second card is here
      </a>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
      <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay" target="_blank">
        Third card is here
      </a>
    </div>

  </div><!-- end .row -->

列表组在这里

如前所述，您将在父列上设置

溢出：auto

，并在列中绝对定位列表组

  <div class="row">
        <!-- Left column -->
        <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
              First card is here.
            </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
            Second card is here
          </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
                        Third card is here
                      </a>
                </div>
            </div>
            <!-- end .row -->
        </div>
        <!-- Right column -->
        <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block overflow-auto">
            <div class="list-group list-unstyled scroll overflow-auto">
            </div>
        </div>
   </div>

---

类似的情况可能是：。。你把内容从流程中里里外外做出来，也许深入研究会让你更容易：-）那不行。功能卡的高度肯定超过350px。

 <div class="list-group list-unstyled">
  List group is here
 </div>

</div>
</div><!-- end parent div now -->

  <div class="row">
        <!-- Left column -->
        <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
              First card is here.
            </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
            Second card is here
          </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-4 pb-4">
                    <a href="#" class="card bg-dark text-white shadow-sm border-0 card-overlay py-5" target="_blank">
                        Third card is here
                      </a>
                </div>
            </div>
            <!-- end .row -->
        </div>
        <!-- Right column -->
        <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block overflow-auto">
            <div class="list-group list-unstyled scroll overflow-auto">
            </div>
        </div>
   </div>