Position: fixed and width: inherit with percent parent

Question

I am trying to give a fixed element a width percentage of the parent (here #container ). When I use a pixel instead of a percentage, 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 eg 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 as follows:

Jsfiddle

Solution with position:relativ does not work for me.

Answer 1

It seems that a static value (250px) can be propagated through regular inheritance. Whereas when using a relative value (90%), the fixed div is already pulled out of the stream, and now it is inherited, it is the parent viewport. It seems to me that you have to use the good old js.

But this question has been going on for months, so probably it does not matter.

Answer 2

There is a belief that inherited values ​​are “translated” from relative (eg, percent) to absolute. Guess what? It is not right. Here MDN talks about this:

The CSS inherit invokes the element for which it is specified; take the computed property value from its parent element.

[...]

The calculation necessary to achieve the calculated value for a property usually involves converting relative values ​​(for example, in em units or percentages ) to absolute values. For example, if an element has the specified font-size: 16px and padding-top: 2em , then the calculated padding-top is 32px (doubles the font size).

However, for some properties (those where percentages relate to what might be required to define the layout, such as width , margin-right , text-indent and top ), the percentages specified are percent calculated values. [...] These relative values ​​that remain in the calculated value become absolute in determining the value used.

---

Now an example. Let them say that 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 will see the following image:

... means that while the #charlie element is the same height as the parent #bravo , its width is 50% of its parent. The calculated value was inherited: 100px for height, 50% for width.

---

While this feature may be good or bad, depending on the situation, for non-fixed elements, it seems to be definitely painfully fixed. Since the 50% value for the width property is inherited as is, the used value for this dimension will be based on the viewport. Same thing with percentage-using values ​​like calc(50%) .

Answer 3

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

Answer 4

set the width of the “fixed” to 100% and give it (let’s say) a position: relative, not fixed. http://jsfiddle.net/J7yE4/

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