在引导程序 V4.4.1 上滚动后，粘性标题会滚动

Question

我正在尝试制作带有粘性顶部和粘性底部的卡片，因为它们显示了一些我希望始终显示的信息和输入。问题是滚动里面的一些内容后，顶部消失了，我不希望这样。

我发现在移除卡片页脚或设置自动卡片高度后问题就消失了。问题是，如果屏幕尺寸足够大，我想要定位的位置需要特定的高度。也无法删除页脚，因为它有内容。

我尝试将便签移到卡体之外，但在移动设备上，它们会在滚动的王国中消失...

我在其他问题上找到的答案并不是很有帮助，因为许多问题都是针对粘性页脚并且没有尝试将粘性页脚放入引导卡中

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background: red
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  background: lightblue;
}

.the-problem {
  height: 30px
}

.content {
  height: 600px;
  background: gray
}

#thing {
  height: 200px;
  width: 300px;
  overflow: auto;
}

#thing {
  width: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form id="thing" class="card mt-3">
  <div class="card-header">An unimportant title</div>
  <div class="card-body p-0" style="overflow: initial">
    <div class="sticky-top">
      sticky-top
    </div>

    <div class="content"> Some content </div>

    <div class="sticky-bottom">
      sticky-bottom
    </div>
    <div class="card-footer the-problem px-3">

    </div>
  </div>
</form>


<form id="thing2" class="card mt-3">
  <div class="card-header">An unimportant title</div>
  <div class="card-body p-0" style="overflow: initial">
    <div class="sticky-top">
      sticky-top
    </div>

    <div class="content"> Some content </div>

    <div class="sticky-bottom">
      sticky-bottom
    </div>
    <div class="card-footer the-problem px-3">

    </div>
  </div>
</form>

Answer 1

需要 2 处更改...

• 评论了粘性页脚下的 div... 这样页脚就可以很好地粘在底部了
• 分隔<form> 和.card 类，这样固定高度不在.card div 元素上...这是因为如果父级具有固定高度，粘性就会消失 - 我们需要这样做<form> 这个固定高度还在<form>

工作sn-p如下：

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 30px;
  background: red
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  background: lightblue;
}

.the-problem {
  height: 30px
}

.content {
  /* height: 600px; */
  background: gray
}

#thing {
  height: 200px;
  width: 300px;
  overflow: auto;
}

#thing {
  width: 300px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<form id="thing">
  <div class='card mt-3'>
    <div class="card-header">An unimportant title</div>
    <div class="card-body p-0" style="overflow: initial">
      <div class="sticky-top">
        sticky-top
      </div>

      <div class="content">
        <p> let the actual content occupy the eeded space... </p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </div>

      <div class="sticky-bottom">
        sticky-bottom
      </div>
      <!--    <div class="card-footer the-problem px-3">    </div> -->
    </div>
  </div>
</form>