position:fixed和width:inherit与百分比父元素相关

Question

我试图让一个固定元素的宽度与其父元素（这里为 #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:relative的解决方案对我不起作用。

- red_baron

---

为什么不使用JavaScript来设置宽度？（http://jsfiddle.net/NfA2Z/7/） - Vucko

@Vucko：我以为我可以不用JavaScript来完成它。但也许不行？！为什么它使用像素值而不是百分比值可以工作？ - red_baron

可能是Fixed Position but Relative to Container的重复问题。 - steveax

Answer 1

有一种观点认为，继承值是从相对值（例如百分比）转换为绝对值的。你猜怎么着？这是错误的。以下是MDN对此的解释：

“inherit” CSS值会导致指定了该值的元素从其父元素中取得属性的计算值。

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

然而，对于某些属性（那些百分比相对于需要布局确定的东西，如宽度、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% 的宽度。

---

尽管这个特性可能因情况而异，对于非固定元素来说，它似乎肯定会损害固定元素。 因为 width 属性的 50% 值被直接继承了，所以该维度的 used value 将基于视口。 对于使用百分比的值，如 calc(50%)，也是一样的。

- raina77ow

Answer 2

似乎静态值（250px）可以通过普通继承传递。然而，当使用相对值（90%）时，固定的 div 已被取出流程，现在从继承方面来看，它的父级是视口。我觉得你可能需要使用老式的 js。

但是这个问题现在已经过去几个月了，所以无论如何都不重要了。

- SuperJumbo

---

在StackOverflow上，旧的问题总是很重要-现在它已经成为“position fixed width inherit”的顶级搜索结果之一。 - justisb

不，当继承属性时，position:fixed元素的处理方式并没有什么特别之处。问题更深层次，也更容易解决。 - raina77ow

Answer 3

你已将 #outer 设置为宽度 300 像素，#container 设置为 90%，即 270 像素，现在你又设置了宽度为 inherit 和 position 为 fixed，这让浏览器混淆了。所以，你应该使用带有宽度 x% 的 position:fixed 来替换。

- Mitesh Vora

---

我需要使用position:fixed，因为我想将它固定在页面底部。就像这样：http://jsfiddle.net/NfA2Z/8/ 我怎么能得到270px？使用JavaScript吗？ - red_baron

Answer 4

将 "fixed" 的宽度设置为 100％，并将其位置（比如）设为相对定位而不是固定定位。 http://jsfiddle.net/J7yE4/

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

- dmestrovic

---

你的解决方案在我的情况下不起作用。我需要固定位置，因为它应该在页面底部。请看一下http://jsfiddle.net/NfA2Z/8/ - red_baron

好的。当您设置宽度为inherit时，它就是这样做的。您的元素继承了父元素的宽度。在这种情况下，它继承了90％！（当您将父元素设置为250px时，它会继承250px） 问题出现在固定位置上。因为宽度现在是基于窗口宽度计算的。 - dmestrovic

好的，我明白了。我以为宽度是来自于 #outer 的 300px。所以在我这种情况下的解决方案是使用 JavaScript 获取 #container 的宽度？ - red_baron

我认为这将是最容易的解决方案。 ^^ （如果不是唯一的解决方案） （通常情况下，宽度来自父元素，但不适用于position：fixed！ =），它会将其固定在窗口上。 - dmestrovic