Position fixed with parent container width

Asked Oct 09 '20 at 10:13

Active Oct 09 '20 at 10:13

Viewed 37 times

I'm trying to make a fixed header that fit it parent container.

.body {
  display: flex;
  width: 100wp;
  height: 700px;
  border: 1px red solid;
 padding-left: 0px;
  padding-right: 80px;
}

.sticky {
  border: 1px blue solid;
  position: fixed;
  width: 100%;
  height: 30px;
}

<div class="body">
  <div class="sticky">
  
  </div>
</div>

It going out the container. So i tried inherit property :

.body {
  display: flex;
  width: 100wp;
  height: 700px;
  border: 1px red solid;
 padding-left: 0px;
  padding-right: 80px;
}

.sticky {
  border: 1px blue solid;
  position: fixed;
  width: inherit;
  height: 30px;
}

<div class="body">
  <div class="sticky">
  
  </div>
</div>

And it doesn't fit too...

Is inherit property can't works with a percentage parent width ? If yes, how to manage that ?

asked Oct 09 '20 at 10:13

Toto NaBendo

2

You can't essentially. a fixed position div has only the viewport as a reference. I'd suggest you try `position:sticky` instead – Paulie_D Oct 09 '20 at 10:17
hey specify your question in more details – Aahad Oct 09 '20 at 10:17
Also note the typo `width: 100wp;` – Paulie_D Oct 09 '20 at 10:19
from the duplicate: https://stackoverflow.com/a/16100627/8620333 – Temani Afif Oct 09 '20 at 10:23
Also duplicate from: https://stackoverflow.com/questions/5873565/set-width-of-a-position-fixed-div-relative-to-parent-div – MaxiGui Oct 09 '20 at 10:29

Position fixed with parent container width

0 Answers0