1

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

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

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

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

.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>

4

1 回答 1

1

需要 2 处更改...

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

下面的工作片段：

.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>

于 2020-05-10T06:41:47.540 回答