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

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?

我试图给一个固定元素一个父百分比的宽度（这里是#container）。当我使用像素而不是百分比时，它的工作原理。我该怎么做？这可能与CSS有关吗？

HTML

HTML

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

CSS

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

的jsfiddle

Add:

加：

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

我需要的位置：固定。因为我想将它放在页面底部，如下所示：

JSFiddle

的jsfiddle

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

有位置的解决方案：relativ对我不起作用。

4 个解决方案

#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, it's parent is the viewport. It seems to me that you're going to have to use good old js.

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

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

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

#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:

有一种观点认为，遗传价值是从相对的（如百分比）“转化”为绝对的。你猜怎么了？这是不对的。以下是MDN对此的评价：

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

继承CSS值使得指定它的元素从其父元素获取属性的计算值。

[...]

[...]

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).

达到属性的计算值所需的计算通常涉及将相对值（例如以em单位或百分比表示的那些）转换为绝对值。例如，如果元素具有指定值font-size：16px和padding-top：2em，则padding-top的计算值为32px（字体大小的两倍）。

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:

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

...意思是虽然#charlie元素与#bravo父元素的高度相同，但它的宽度是其父元素的50％。 Inherited是一个计算值：高度为100px，宽度为50％。

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%).

虽然这个功能可能好坏，但根据情况，对于非固定元素，它似乎肯定会伤害固定元素。由于width属性的50％值按原样继承，因此该维度的使用值将基于视口。使用百分比值也是如此，例如calc（50％）。

#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

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

#4

-1

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

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

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

#1