CSS 灵活的粘性 Header 可能会增长并向下推下面的项目

Question

我正在尝试创建一个 Sticky Header，如果用户在左侧网格中选择更多文档（未显示），Sticker Header 可以在其中增长（绿框）。

其他所有东西都应该相应地向下推（在蓝色框中）。不知道该怎么做，因为所有资源都说粘性 header position:fixed 和 body padding-top 处于设定数量。

错误 - 现在蓝色便签 header 正在吞噬绿色框，因为添加了更多文档标题。

下面有3个盒子，黑色是整体容器，绿色是top StickyHeader，蓝色是Body。

置顶 header 应该保持不变，而用户向下滚动以阅读长篇文章 body。

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

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

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

利用Angular框架，仅供参考，

Answer 1

如果你改变位置就会解决属性。

将其更改为置顶：position:sticky

Answer 2

这不应该是默认 html/css 的问题。我认为可能有一些特定的 css 导致了这种效果。您可以尝试使用 css 值来找出造成这种情况的原因。

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

.container {
  border: 1px solid;
  background: cyan;
  position: fixed;
  padding: 10px;
  top: 10px;
  bottom: 10px;
  right: 10px;
}

.container__top {
  border: 1px solid;
  background: green;
  padding: 5px;
}

.container__bottom {
  border: 1px solid;
  background: lightblue;
  padding: 5px;
}

<div class="container">

  <section class="container__top">
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
    </ul>
  </section>

  <section class="container__bottom">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </section>



</div>

CSS 灵活的粘性 Header 可能会增长并向下推下面的项目

CSS Flexible Sticky Header which may Grow and Pushes Below Items Down

html

css

angular

sticky-footer