当孩子位置固定时，从 Bootstrap 容器继承宽度

Question

我试图让标题 div 从其父级继承其宽度。标题 div 是position: fixed. 父级包含在引导容器内。

但是，正如您在我创建的代码中看到的那样，它没有正确继承其父级的宽度 - 它从某处添加了一些额外的宽度。

这一切都非常烦人！知道如何解决这个问题吗？

.category-body {
  margin-left: 17% !important;
  width: 67%;
  background-color: red;
  height: 500px;
}
.category-header {
  position: fixed;
  top: 51px;
  width: inherit;
  background-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="category-body">We are in the category-body
    <div class="category-header">We are in the category-header</div>
  </div>
</div>

http://plnkr.co/edit/yVk15RqDqAac4H2eDJQe

Answer 1

问题源于在parent 上使用百分比值width。浏览器似乎对此有问题。（在 Chrome、FF 和 IE11 上测试。）

如果您使用像素值，问题就会消失。

修改PLUNKR

来自另一个答案：

似乎静态值（250px）可以通过正常继承传播。而当使用相对值 (90%) 时，固定 div 已经被排除在外，现在继承方面，它的父级是视口。

在这里了解更多：

• 位置：固定和宽度：继承百分比父级
• 如何使固定定位的 div 继承父级的宽度？
• 将固定 div 设置为父容器的 100% 宽度
• 设置“位置：固定”div 相对于父 div 的宽度
• 设置固定定位 div 相对于具有最大宽度的父级的宽度
• 流体宽度固定位置