Question

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

在其右侧，我有一列包含一个.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的实际长度大于其右侧内容的长度，将其可见高度切短以匹配右侧内容的高度？< / p>

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

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

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);
    });

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

1 个答案: