Как сделать так, чтобы столбец группы списков прокрутки имел ту же высоту, что и соседний столбец?

Question

В разметке Bootstrap 4 у меня есть левый столбец, который содержит .list-group, который, динамически генерируемый, может содержать десятки .list-group-item s.

Справа у меня естьстолбец, содержащий .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.

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