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

【问题标题】：Inheriting width from Bootstrap container when child is position fixed当孩子位置固定时从 Bootstrap 容器继承宽度
【发布时间】：2016-03-13 17:08:19
【问题描述】：

我正在尝试让标题 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

【问题讨论】：

父元素的宽度是否总是67%？
我明白你的意思，但你的继承概念有点离题。当您将position: fixed 应用于某个元素时，您会将其从文档流中移除。然后该元素没有父元素，因此没有什么可继承的。更多详情here
@Michael_B 这并不完全正确。即使该元素已从文档流中删除，它仍然继承67% 的宽度。它只是不起作用，因为百分比是相对于视口而不是与父容器相同的容器。宽度是继承的。例如，如果父级的宽度为300px，则为would work as expected。它并不总是适用于基于百分比的宽度。
@Josh Corzier 没有必要——仅适用于最小宽度：1200px。对于较小的屏幕尺寸，它有 margin-left/right: 100px (min-width: 992) 或下面的空 .category-body{}

标签： html css twitter-bootstrap css-position

【解决方案1】：

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

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

Revise PLUNKR

来自another answer：

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

在此处了解更多信息：

【讨论】：

所以从表面上看，唯一的非像素方式就是使用 javascript？