Html CSS灵活的粘性标题，可以增长并向下推送下面的项目

我正在尝试创建一个粘性标题，如果用户选择左侧网格中的更多文档（未显示），则标签标题可以增长（绿色框）

其他所有内容都应相应地向下推（在蓝色框中）。 我不知道该怎么做，因为所有的资源都说sticky header

position:fixed

和body

padding top

处于设置的数量

错误-现在，随着更多文档标题的添加，蓝色粘性标题正在吞噬绿色框

下面有3个框，黑色是整体容器，绿色是顶部粘性标题，蓝色是主体

当用户向下滚动以读取长正文时，粘性标题应保持不变

备选方案：目前正在使用下面的Javascript，不知道是否有办法严格使用CSS、flexbox、无Js

document.getElementById("bluebox-body-id").style.paddingTop = (50 * numberOfDocuments).toString()+ "px";

---

利用角度框架，仅供参考，

如果您更改位置属性，它将得到解决

---

将其更改为sticky:

位置：sticky

默认html/css不应存在此问题。我认为可能是某些特定的css导致了这种效果。您可以使用css值来找出导致这种情况的原因

在本例中，我重新创建了您寻求的结果。请看一看。

.container{
边框：1px实心；
背景：青色；
位置：固定；
填充：10px；
顶部：10px；
底部：10px；
右：10px；
}
.容器顶部{
边框：1px实心；
背景：绿色；
填充物：5px；
}
.容器底部{
边框：1px实心；
背景：浅蓝色；
填充物：5px；
}

a
b
c
d
e


一,
二,
三,
四,
五,

Hi，添加更多文档时，页眉会变大，而不会吃掉正文。但是，当我向下滚动时，粘性页眉不起作用。您是否可以复制此问题？它在w3学校工作正常。你能给我发一个w3学校的链接吗？我编辑了你共享的URL的第一部分。检查此URL-这在我的增长标题中不起作用，因为他们说边距顶部为特定值。main{padding:16px；边距顶部：10px；height:1500px；/*在本例中用于启用滚动*/}这不起作用，因为它需要是可滚动的完整页面答案，我尝试扩展到完整页面