Html 将元件粘到固定元件的底部

我有一个固定的标题元素，我想保持在滚动固定。但是，我希望滚动区域定位在固定元素之后，但我不想使用

position:absolute

并将其从文档流中删除

我已经创建了一个代码笔来说明我遇到的问题。我希望红色元素（.top）保持滚动，而不隐藏第一个列表项

在CSS（可能使用flexbox）中是否有一种不需要任何JS的方法来实现这一点

感谢您的帮助

---

提前谢谢

如果我对您的问题的理解是正确的，您不想做任何更改，只想将可滚动内容隐藏在固定标题后面

固定收割台的自然高度似乎接近20px

因此，您可以将上边距应用于可滚动内容，将其从顶部向下推，直到清除标题

尝试将此添加到CSS中：

div.list { margin-top: 20px;}

这将把包含所有列表项的

div

从顶部推到20px

演示：

---

更新

当固定收割台的高度已知时，上述答案有效。但根据评论中的反馈，标题的高度会有所不同。因此，需要一种解决方案，使可滚动内容保持在标题下方，而不考虑标题的高度

这一问题已在以下职位中得到解决：

---

这是可行的，可能是我通常会做的，但我希望粘性区域的高度会发生变化，并且希望列表将自身定位在固定区域的正下方，无论其大小如何。如果这有意义的话？如何计算固定标题的高度？这就是问题所在，我不想在CSS中定义它。该固定区域将在单击时展开，我希望列表随着固定区域的展开而向下移动。我明白你的意思。但是像

position:absolute

，

position:fixed

将元素从流中取出。所以可滚动内容不知道标题存在。谢谢！我将选择定义固定区域的高度，并在列表中添加上边距，我想这是唯一明智的方法。谢谢你的回答！