孩子位置固定时继承宽度答案

【问题标题】：Inheriting Width when child is position fixed孩子位置固定时继承宽度
【发布时间】：2015-11-28 17:28:35
【问题描述】：

我试图让一个标题 div 从它的父级继承它的宽度。标题 div 的位置是固定的。

但是，正如您在我在这里创建的简单 PLNKR 中看到的那样：

http://plnkr.co/edit/wxcvssALhjxtzc7J4w3V

它实际上比它的父元素宽，这很奇怪。

html 看起来像这样：

<div class="category-body">We are in the category-body
  <div class="category-header">We are in the category-header</div>
</div>

CSS 看起来像这样：

.category-body {
    margin-left: 17% !important;
    width: 67%;
    background-color: red;
    height: 500px;
}

.category-header {
    position: fixed;
    top: 51px;
    width: inherit;
    background-color: green;
}

任何想法为什么会发生这种情况？当然，如何解决它？

【问题讨论】：

stackoverflow.com/questions/17806852/…的可能重复

标签： css

【解决方案1】：

您没有使用重置 css 表，因此默认情况下浏览器的正文边距可能会弄乱您的代码。它会影响您的父级，因为位置是静态的，但不会影响您的固定子级，因为固定元素会脱离 html 流。

只需添加：

html, body {margin:0;}

FIDDLE

【讨论】：

嗨，Alvaro - 在 plnkr 中效果很好。然而，在我的真实世界版本中，这有点复杂，它并不能解决问题。您认为还有哪些地方可能会丢弃它？
我只是建议您在您制作的每个项目开始时使用重置 css 表。更多文档在这里：cssreset.com 除非我可以使用 crhome（或类似）工具检查整个网络，否则我无法再为您提供帮助。