Question

我想让一个标题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;
}

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

Answer 1

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

只需添加：

html, body {margin:0;}

<强> FIDDLE

当子位置固定时继承宽度

1 个答案: