css - 如何使滚动列表组列与相邻列的高度相同？

Question

在 Bootstrap 4 标记中，我有一个左侧列，其中包含 a .list-group，动态生成的可以包含几十个.list-group-items。

在它的右边，我有一个包含 a 的列，.row它本身包含许多卡片，都在列内。可能有数百个...

<h3 class="text-secondary pb-3">Header</h3>

<div class="row">

   <div class="col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="max-height: 7000px; overflow-y: scroll;">
     <div class="list-group list-unstyled">
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
     </div>
   </div>
   <div class="col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9>
       <div class="row">
        Lots of cards throughout this row, inside .col-lg-4 cards.
       </div>
    </div>

 </div>

根据右侧的内容量，左侧.list-group的音量可能会比右侧的音量长得多。在这种情况下，我希望 的显示高度.list-group受到限制，并且.list-group可以独立滚动。

我设法通过将 CSS 规则overflow-y: scroll;应用于包含它的列来实现这一点，感觉很棒......

问题是，我只能通过手动设置列的高度来管理它，例如。max-height:7000px;.

这样做的问题是，根据右侧内容的数量，它可能会缩短可查看的.list-group. 在此示例中，左侧.list-group列的底部应拉伸到相邻右侧内容的底部，同时还保留独立滚动...

我如何确保在左侧列 / 的.list-group物理长度比右侧的内容长的情况下，其可视高度缩短以匹配右侧内容的高度？

这应该保留overflow-y: scroll;，以便如果列表仍然比右边的长，它可以垂直滚动。

理想的解决方案是使用 Bootstrap 4 样式，而不是编写自定义 CSS 规则。

标签： cssbootstrap-4

Answer 1

由于溢出滚动需要固定height，所以不能使用auto. 您需要使用带有底座的卡片区域的高度来使用 jquery 更改滚动区域的高度。

如果内容是动态生成的，则需要在等于高度之前设置超时。

这是一个使用 jquery 的示例。在示例中，我获取卡片区域的高度并将其设置为列表组区域的高度。

html

<h3 class="text-secondary pb-3">Header</h3>

<div class="row">

   // Add a class to the list group area and set height instead max-height
   <div class="list-group-area col-12 col-sm-5 col-md-4 col-lg-4 col-xl-3 d-none d-sm-block" style="height: 300px; overflow-y: scroll;">
     <div class="list-group list-unstyled">
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
       <a href="http://www.example.com/link" alt="View all post filed under example" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
         <span><img src="https://www.google.com/s2/favicons?domain=example.com" class="mr-2">Example link</span>
         <span class="badge badge-primary badge-pill">26</span>
       </a>
     </div>
   </div>

   // Add a class to the card area
   <div class="cards-area col-12 col-sm-7 col-md-8 col-lg-8 col-xl-9">
       <div class="row">
        Lots of cards throughout this row, inside .col-lg-4 cards.
       </div>
    </div>

 </div>

JavaScript：

    $(document).ready(function() {
      // Delay
      setTimeout(function() { 
        $('.list-group-area').height($('.cards-area').height());
      }, 1000);
    });