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

Question

我正在尝试让 header div 继承其 parent 的宽度。 header div 是 position: fixed。 parent 包含在 bootstrap 容器内。

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

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

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

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.

在此处了解更多信息：

position:fixed and width:inherit with percentage parent
Set a Fixed div to 100% width of the parent container
Set width of a "Position: fixed" div relative to parent div
Set width of fixed positioned div relative to his parent having max-width
Fluid width fixed position

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

Inheriting width from Bootstrap container when child is position fixed

html

css

css-position

twitter-bootstrap