Sticky Header - 相对于动态标题长度的正文位置

Question

尝试将标题贴在页面顶部 - postion:fixed - 正常工作

但是在这样做时，身体无法相对于标题放置 - 如果position:relative Demo

，这是可能的

我想要实现的目标 -

• 与滚动

一起移动的Sticky标题

• 与上方标题相对高度的身体（身高是动态的）

到目前为止我做了什么：DEMO

我试图找到一个纯CSS （甚至可能吗？）解决方案，但一直没有成功 - 任何帮助都表示赞赏

Answer 1

尝试将padding-top: XXX添加到正文包装div，其中XXX等于标题高度。为了做到这一点（具有固定的标题和可滚动的主体）与纯CSS，您必须预先知道标题高度。否则它将覆盖身体div的顶部。