html - 修复屏幕底部的元素，但前提是父容器尚未结束？

Question

假设我有一个元素，它在视觉上是容器的一部分。这个容器的高度可能非常长。

现在，当用户向下滚动时，我想将此元素放置在屏幕底部。。但是当容器在某个时刻结束时，我希望元素保留在该容器的底部并且不再向下滚动。

所以再说一次:当容器还没有结束时，元素位于屏幕的底部:

...但是当我继续滚动时，它停在容器内:

我有点卡在这里了。当元素位于容器内部的顶部时，我确实知道如何执行此操作。向下滚动只会使其停在底部。

问题似乎在于，要么元素将被移动到文档流之外，因此它不会保留在容器内，要么它将始终位于容器的底部，因此该元素不会随用户滚动并保留在屏幕底部。

有什么想法吗？

<div className="mx-20 my-36">
    <div className="bg-slate-200 h-[1200px] w-full relative border-2 border-black relative">
        <div className="fixed bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600">Element</div>
    </div>

    <div className="my-12">

        The page continues here but the element remains in the container ...
    </div>
</div>

PS:这里使用 tailwind 和 React，但也欢迎任何普通 CSS!我很想在没有 JavaScript 的情况下解决这个问题。

Answer 1

1. 围绕这两个元素创建一个父 div。将除高度之外的所有样式移至此父级。
2. 将固定切换为粘性
3. 您可以删除relative - 它不再执行任何操作

<div className="mx-20 my-36">
  <div className="bg-slate-200 border-2 border-black w-full">
    <div className="h-[1200px]">
    </div>
    <div className="sticky bottom-0 left-0 right-0 p-2 bg-white w-full border-2 border-red-600">Element</div>
  </div>

  <div className="my-12">
    The page continues here but the element remains in the container ...
  </div>
</div>

演示:https://play.tailwindcss.com/gy71xPcjnR