位置：固定和宽度：继承百分比父级

我想给一个fixed元素awidth百分比父母（这里#container）。当我使用像素而不是百分比时，它就起作用了。我该怎么做？这可能吗？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 http://jsfiddle.net/NfA2Z/4/

Add:

I need position:fixed。因为我想把它放在页面底部，如下所示：

JSFiddle http://jsfiddle.net/NfA2Z/8/

解决方案与position:relativ对我不起作用。

人们相信继承的价值观是从相对价值观（例如百分比）“转化”为绝对价值观的。你猜怎么了？这是不对的。 MDN 对此是这么说的：

The inheritCSS-value 导致其指定的元素 采取计算值来自其父元素的属性。

[...]

达到属性计算值所需的计算 通常涉及转换相对值（例如那些在em units or percentages) to 绝对值。例如，如果某个元素具有指定值font-size: 16px and padding-top: 2em，那么 padding-top 的计算值为32px（字体大小加倍）。

然而，对于某些属性（百分比相对于 可能需要布局来确定的东西，例如width, margin-right, text-indent, and top), 指定值的百分比 转化为百分比计算值。[...] 当计算值中保留的这些相对值变为绝对值时使用价值决心，决意，决定。

现在举个例子。假设我们有以下结构：

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

...以及以下 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; }

...你会看到这张图片：

......意味着虽然#charlie元素与其高度相同#bravo父级，其宽度为其父级的 50%。继承的是一个计算值：100px对于身高，50%对于宽度。

虽然这个功能可能是好是坏，取决于具体情况，但对于非固定元素来说，它似乎肯定会损害固定元素。作为50%价值width财产按原样继承，used value该尺寸将基于视口。与percentage-using值，例如calc(50%).