将元素粘贴到固定元素的底部

我有一个固定的标题元素，我希望在滚动时保持不变。可滚动区域，但是，我希望它定位在固定元素之后，但我不想使用position: absolute并将其从文档流中移除。将元素粘贴到固定元素的底部

我创建了一个Codepen here来说明我有这个问题。我希望红色元素（.top）能够保持滚动状态，而不会隐藏第一个列表项。

有没有办法去在CSS中这样做（可能使用Flexbox的），不需要任何JS？

任何帮助表示赞赏。

在此先感谢！

2015-10-01 realph

如果我对您的问题的理解是正确的，那么您不想对进行更改，除非为可滚动内容不隐藏在固定标题后面。

固定头，似乎有近20像素的自然高度。

所以，你可以申请一个上边距到把它推离顶部的滚动内容，直到它清除头。

尝试增加给你的CSS：

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

这将推动包含div所有列表项从顶部20像素。

UPDATE

上述工程答案时所述固定报头的高度是已知的。但根据评论中的反馈，标题的高度会有所不同。因此需要一种解决方案，无论标头的高度如何，都可将可滚动内容保留在标题下。

这个问题在这些帖子得到解决：

2015-10-01 20:24:40

这工作，并可能是什么，我通常会做的，但我希望粘面积改变高度，并希望名单直接放置在固定区域的下方，无论它的大小如何。如果这有道理？ – realph

固定标题的高度是如何计算的？ –

就是这样，我不想在CSS中定义它。固定区域将随着点击而扩大，我希望列表随着固定区域的扩大而向下移动。 – realph

回答