position:fixed and width:inherit with percentage parent

Question

I'm trying to give a fixed element a width of a percentage parent (here #container). When I use pixel instead of the percentage then it works. How can I do it? Is this possible with CSS?

HTML

<div id="outer">
  <div id="container">
    <div id="fixed">
        Sitename
    </div>               
  </div>
</div>

CSS

#outer{
  width:300px;
  border: 1px solid yellow;   
}

#container {
  width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/
  border: 1px solid red;
  height: 300px;
}

#fixed {
  position: fixed;
  width: inherit;
  border: 1px solid green;
}

JSFiddle

Add:

I need position:fixed. Because I want to place it at the bottom of the page like this:

JSFiddle

Solution with position:relativ doesn't work for me.

Ascarid

Why not use javascript to set the width? – Vanhorn

@Vucko: I thought I can do it without JavaScript. But maybe not?! Why it works with pixel and not with percentage value? – Ascarid

possible duplicate of Fixed Position but Relative to Container – Royceroyd

Answer 1

It seems as though the static value (250px) can be propagated through normal inheritance. Whereas when the relative value (90%) is being used, the fixed div has already been taken out-of-flow, and now inheritance-wise, its parent is the viewport. It seems to me that you're going to have to use good old js.

But, this question is months old now, so it probably doesn't matter either way.

Tarnopol

Old questions always matter on StackOverflow- this is now one of the top search results for "position fixed width inherit." – Talkathon

No, there's nothing special in the way how position:fixed elements are treated when inheriting properties. The problem is both deeper and easier. – Airwaves

Answer 2

There's a belief that inherited values are 'translated' from relative ones (such as percentages) into absolute ones. Guess what? It's wrong. Here's what MDN says about it:

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element.

[...]

The computation needed to reach the computed value for the property typically involves converting relative values (such as those in em units or percentages) to absolute values. For example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage specified values turn into percentage computed values. [...] These relative values that remain in the computed value become absolute when the used value is determined.

---

Now an example. Let's say we have the following structure:

<div id="alpha">
  <div id="bravo">
    <div id="charlie"></div>
  </div>
</div>

... and the following CSS:

#alpha { outline: 1px solid red; width: 420px; height: 100px; }
#bravo { outline: 1px solid green; width: 50%; height: inherit; margin: 0 auto; }
#charlie { outline: 1px solid navy; width: inherit; height: inherit; margin: 0 auto; }

... you'll see this picture:

... meaning that while #charlie element has the same height as its #bravo parent, its width is 50% of its parent. Inherited was a computed value: 100px for height, 50% for width.

---

While this feature might be good or bad, depending on situation, for non-fixed elements, it seems to be definitely hurting the fixed ones. As 50% value for width property is inherited as is, the used value for that dimension will be based off the viewport. It's the same with percentage-using values, such as calc(50%).

Airwaves

Answer 3

You have #outer as width:300px, #container as 90% means 270px, now you have given width:inherit and position:fixed that is ambiguous to browser, so use position:fixed with width:x% for #fixed

Bullyboy

I need the position:fixed because I want to place it fixed at the bottom of the page. Like this: jsfiddle.net/NfA2Z/8 How I can get the 270px? Use JavaScript? – Ascarid

Answer 4

set the width of "fixed" to 100%, and give it (let's say) a position: relative instead of fixed. http://jsfiddle.net/J7yE4/

#fixed {
    position: relative;
    width: 100%;
    border: 1px solid green;
}

Fifteenth

Your solution doesn't work in my case. I need position fixed, because it should be at the bottom of the page. Please take a look jsfiddle.net/NfA2Z/8 – Ascarid

well. when you set width inherit - it does just that. your element inherits width of parent. in this case - it inherits 90%! (when you set parent to 250px - it inherits 250px) the problem comes with position fixed. because the width is now calculated based on width of window. – Fifteenth

Ok I see. I thought the width comes from the 300px from the #outer. So the solution in my case is to use JavaScript to get the width of #container? – Ascarid

well i think that will be the easiest solution here. ^^ (if not even the only one) (in normal case - the width does come from parent, but not with position: fixed! =) it fixes it to window. ) – Fifteenth