css - 宽度为 100% 的固定 div 上的边距？

Question

我需要一个固定的标题，内容(正文)可以在该标题下滚动。这个 header 应该是父级的 100%，但是父级有一些 margin-right。固定 header 获得窗口的 100% 宽度，而不是父窗口的宽度。

如何解决这个问题？

例子: http://jsfiddle.net/4u0c85k8/

HTML

<div id="parent">
    <div id="child">
        <div id="header">
            HEADER
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
</div>

CSS

#parent {
    width: 100%;
    border: solid 1px black;
}

#child {
    background-color: lightgray;
    margin: 0 8px;
    width: auto;
}

#header {
    position: fixed;
    height: 28px;
    top: 17px;
    background-color: lightgreen;
    width: 100%;
}

#content {
    margin-top: 36px;
    height: 1000px;
}

Answer 1

如果您更改此 css 的宽度:100%:

right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;

它有效，但我不认为它是最好的解决方案。