固定元素底部粘贴到另一固定元素上方的位置

Question

3

我有一个固定的页眉元素，我希望它在滚动时保持固定。可滚动区域，我希望它直接位于固定元素后面，但是我不想使用position:absolute并将其从文档流中移除。

我已经创建了一个Codepen here 来说明我遇到的问题。我希望红色元素 (.top) 在滚动时固定，而不隐藏第一个列表项。

是否有一种使用CSS（可能使用flexbox）而不需要任何JS的方法来解决这个问题？

感谢您的帮助。

提前致谢！

- realph

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

如果我正确理解您的问题，您希望不做任何更改，除了滚动内容不会隐藏在固定标题后面。

固定标题似乎有将近20像素的自然高度。

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

尝试将此添加到您的CSS中：

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

这将使包含所有列表项的 div 距顶部向下推 20 像素。

更新

上面的答案适用于固定头的高度已知的情况。但根据评论反馈，头部高度会变化。因此需要一种解决方案，无论头部高度如何，都可以保持滚动内容在头部下方。

这个问题已经在以下帖子中得到了解决：