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

Question

I am trying to create a Sticky Header, where the Sticker Header can grow (Green Box), if user chooses more documents in left grid (not pictured).

Everything else should be push downed correspondingly (in the blue box). Not sure how to do this, since all the resources say sticky header position:fixed and body padding-top is at set amount.

Error - Right now the blue sticky header, is eating over the Green box, as more document titles are added.

There are 3 boxes below, Black is overall container, Green is top Sticky Header, and Blue is Body.

Sticky header should hold, while user scrolls down to read long body.

Alternative: Currently using Javascript below, wonder if there is way to conduct strictly with CSS, flexbox, no Js.

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

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

Utilizing Angular framework, just fyi ,

user_10578638 · Answer

It will get resolved if you change the position property.

Change it to sticky: position:sticky

user_8129670 · Answer

This shouldn't be an issue with default html/css. I think there might be some specific css that is causing this effect. You could play around with the css values to figure out what is causing this.

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;
}

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

2 Answers