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

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

CSSinherit值使指定它的元素从其父元素获取属性的计算值。

[...]

达到属性的计算值所需的计算通常涉及将相对值（例如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 2

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

但是，这个问题已经有几个月了，所以这两种方式都可能无关紧要。

Answer 3

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

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