html - 位置：固定和宽度：继承与百分比父

Question

我试图给一个百分比父级的固定元素（here ）。当我使用像素而不是百分比时，它可以工作。我该怎么做？这可能与CSS吗？width#container

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

有一种观点认为，继承的价值是从相对价值（例如百分比）“转换”成绝对价值的。你猜怎么着？这是错的。这是 MDN 所说的：

inheritCSS-value 导致指定它的元素从其父元素中获取属性的计算值。

[...]

达到属性计算值所需的计算通常涉及将相对值（例如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 作为 width:300px，#container 作为 90% 表示 270px，现在你已经给了 width:inherit 和 position:fixed 这对浏览器来说是模棱两可的，所以使用 position:fixed 和 width:x% 作为#fixed

Answer 4

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

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