引导网格和粘性定位

Question

我有一个引导网格布局，其中一些卡以小屏幕尺寸堆叠，然后以MD尺寸分为两列，以LG +尺寸分为3列。

我有一张我想成为position: sticky;的卡片，其MD尺寸或更高，可以单独工作，但是由于各种row和{{ 1}}元素折叠其高度，并且粘性元素相对于其父容器具有粘性-基本上，这意味着它会立即触底并不再具有粘性

col-*

.tall-card {
  height: 800px;
}

@media (min-width: 768px) {
  .sticky-top-md {
    position: sticky !important;
    z-index: 1020;
    top: 0;
  }
}

或在CodePen上查看：https://codepen.io/chrismbarr/pen/YgXeMO

我发现可以解决此问题的一种方法是在父类<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container mt-4"> <div class="row"> <div class="col-md-6 bg-primary"> <section class="card mb-3"> <div class="card-body tall-card"> The Tall Card </div> </section> </div> <div class="col-md-6 bg-secondary"> <div class="row" style="background:rgba(255,0,0,.5)"> <div class="col-lg-6" style="background:rgba(0,255,0,.5)"> <section class="card mb-3"> <div class="card-body"> Middle Card </div> </section> </div> <div class="col-lg-6" style="background:rgba(0,0,255,.5)"> <section class="card mb-3 sticky-top-md"> <div class="card-body"> Sticky Card! </div> </section> </div> </div> </div> </div> </div> <footer class="border w-100 p-2 bg-info mt-2 text-white text-center"> The footer </footer>和h-100上添加row类，这些类可以起作用，该卡具有粘性... 但是现在仅在MD屏幕尺寸（当2个较小的卡堆叠时），包含的列比行高，并且其伸出的距离比预期的要长，从而使整个页面滚动到页脚。

col-*

.tall-card {
  height: 800px;
}

@media (min-width: 768px) {
  .sticky-top-md {
    position: sticky !important;
    z-index: 1020;
    top: 0;
  }
}

或在CodePen上查看：https://codepen.io/chrismbarr/pen/qvdxvx

我需要怎么做才能使卡在MD +尺寸时保持粘性并且不弄乱页面页脚滚动？这是发生的情况的屏幕截图，紫色透明BG是100％高的行和列。

注意：将彩色背景添加到某些元素中，可以更轻松地查看它们的大小。您需要以MD屏幕尺寸查看示例，以了解发生的问题。