固定标题宽度 100%

Question

我有以下代码，但由于某种原因不起作用。

<body>
    <div class="body_wrapper">
        <header></header>
    </div>    
</body>

我希望 body_wrapper 有边距：20px，但是当放置 position:fixed 到 header 时会从右侧忽略它。

我希望标题占据 body_wrapper 的 100% 宽度。 我试着把 right:20px, right:20px 但什么都没有

这可能不放例如宽度：98％吗？

Answer 1

除去width ，并设置两个left和right属性
例如http://jsfiddle.net/rbk7jv8b/

header {
    min-height:160px;
    background:red;
    position:fixed;
    left: 20px;
    right: 20px;
    z-index:100;
}

另一种方法是使用calc()作为width属性（ 100%减去40px的边距）例如http://jsfiddle.net/f1ay8zkr/

header {
    min-height:160px;
    background:red;
    position:fixed;
    width: calc(100% - 40px);
    z-index:100;
}

Answer 2

你的 div 没有关闭。

<body>
    <div class="body_wrapper">
        <header></header>
    </div>    
</body>

然后，使用 left 和 right 属性：

header {
    min-height:160px;
    background:red;
    position:fixed;
    left: 20px;
    right: 20px;
}

Answer 3

添加right:20px; left:20px; 移除width:100%

header {
  min-height: 160px;
  background: red;
  position: fixed;
  z-index: 100;
  right: 20px;
  left: 20px;
}