position：fixed和width：继承父百分比

Question

我正在尝试将修复元素作为父级百分比width（此处为#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

添加

我需要position:fixed。因为我想将它放在页面底部，如下所示：

JSFiddle

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

Answer 1

似乎静态值（250px）可以通过正常继承传播。而当使用相对值（90％）时，固定div已经被取出流，现在继承，它的父是视口。在我看来，你将不得不使用好老js。

但是，这个问题现在已经有几个月了，所以无论哪种方式都没关系。

Answer 2

有一种信念，即继承的价值被翻译成了＃39;从相对的（如百分比）到绝对的。你猜怎么着？这是错的。以下是MDN对此的评论：

  

inherit CSS值会导致指定它的元素   从其父元素中获取属性的计算值。

     

[...]

     

达到属性的计算值所需的计算   通常涉及将相对值（例如em units或percentages中的相对值）转换为绝对值。例如，如果元素具有指定值font-size: 16px和padding-top: 2em，则padding-top的计算值为32px（字体大小加倍）。

     

然而，对于某些属性（百分比相对于那些属性）   可能需要布局来确定的内容，例如width，   margin-right，text-indent和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%)。

Answer 3

你有#outer作为宽度：300px，＃container作为90％表示270px，现在你给出了宽度：inherit和position：fixed对浏览器不明确，所以使用position：fixed with width：x％for #fixed

Answer 4

将“fixed”的宽度设置为100％，并给它（比方说）一个位置：relative而不是fixed。 http://jsfiddle.net/J7yE4/

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