固定位置子项时从Bootstrap容器继承宽度 [英] Inheriting width from Bootstrap container when child is position fixed

问题描述

我正在尝试使标头div从其父级继承其宽度。标题div是位置：固定。父级包含在引导容器中。

I am trying to have a header div inherit its width from its parent. The header div is position: fixed. The parent is contained inside a bootstrap container.

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

However, as you can see in the code I've created, it is not correctly inheriting the width of its parent - it is adding some extra width from somewhere.

这一切都非常令人讨厌！知道如何解决此问题吗？

This is all very annoying! Any idea how to fix this?

.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

推荐答案

问题源于在父宽度上使用百分比值。浏览器似乎对此有问题。 （在Chrome，FF和IE11上进行了测试。）

The problem stems from using a percentage value on the parent width. Browsers seem to have a problem with this. (Tested on Chrome, FF & IE11.)

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

If you use pixel values the problem goes away.

修订PLUNKR

来自另一个答案：

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

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.

此处了解更多信息：

• 位置：固定且宽度：父级百分比继承


• 如何使固定位置的div继承父对象的宽度？


• 将固定div设置为父容器的100％宽度


• 设置位置：固定的宽度相对于父div的div


• 设置固定位置的div相对于其父的宽度具有最大宽度


• 流体宽度固定位置

• position:fixed and width:inherit with percentage parent
• How can I make a fixed positioned div inherit width of 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

这篇关于固定位置子项时从Bootstrap容器继承宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！