CSS弹性粘性标头，可以增长并向下推动其他项目

Question

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

其他所有内容都应相应地向下推动（在蓝色框中）。 不确定如何做到这一点，因为所有资源都说粘性头部 position:fixed 和 body padding-top 是固定的。

错误 - 现在，随着添加更多文档标题，蓝色粘性头部正在覆盖绿色框。

以下有 3 个盒子，黑色是总容器，绿色是顶部粘性头部，蓝色是正文。

当用户向下滚动以阅读长文章时，粘性头部应保持。

替代方案：目前使用下面的 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 框架。

- user13889515

Answer 1

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

将其更改为sticky：position: sticky

- Jasdeep Singh

---

嗨，当添加更多文档时，标题会增长而不会影响正文，但是当我向下滚动时，固定的标题无法保持。 - user13889515

我编辑了你分享的URL中的第一个fiddle。请查看此URL - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu - Jasdeep Singh

这段代码在我的头部不起作用，因为他们将margin-top设置为特定值。 .main { padding: 16px; margin-top: 10px; height: 1500px; /* 此示例中用于启用滚动 */ } - user13889515

你能否在 StackBlitz 或 JSFiddle 上复现你的问题？ - Jasdeep Singh

不幸的是，在企业环境中工作，基本上只有三个框，就像上面的问题图片一样。 - user13889515

Answer 2

在默认的 HTML/CSS 中不应该出现这个问题。我认为可能是某些特定的 CSS 导致了这种效果。你可以尝试调整 CSS 值来找出导致此问题的原因。

In this example I recreated the result you seek. Please have a look.

.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>

- Jelle

---

这不起作用，因为它需要是可滚动的全页答案，我尝试将其扩展到全页。 - user13889515