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

问题源于在父width上使用百分比值。浏览器似乎有这个问题。（在Chrome，FF和IE11上测试过。）

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

Revise PLUNKR

来自another answer：

似乎可以传播静态值（250px）正常继承。而当相对值（90％）正在使用过，固定div已经被淘汰了，现在继承方面，它的父级是视口。

在此处了解详情：

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

1 个答案: