Question

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

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

我希望body_wrapper有余量：20px但是当放置位置：固定到标题时忽略它从右侧。

http://jsfiddle.net/vfe1bz65/

我希望标题占用body_wrapper的100％宽度。我尝试了正确：20px，右：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: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    z-index:100;
}

Answer 2

你的div没有关闭。

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

然后，使用左右属性：

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;
}

固定标题宽度100％

3 个答案: