位置固定为边距和宽度100%错误

Question

我有一个简单的分度,width:100%和position:fixed上下.这是我的CSS:

#footer {
     width: 100%;
     border: 1px solid #000000;
     position:fixed;
     bottom: 0;
     margin:0 5px;
}

当我使用速记属性左右应用边距时,页脚被推向右边,这很奇怪.

我创造了一个小提琴供你玩:小提琴演示

Answer 1

你可以使用calc():

jsFiddle例子

#footer {
    width: calc(100% - 12px);
    border: 1px solid #000000;
    position:fixed;
    margin:0 5px;
}
body {
    margin:0;
    padding:0;
}

计算中的12px来自每个边距的5px,加上左边界和右边界的1px.

或选项#2(无width或calc()需要).只需将左侧和右侧设置为5px,页脚将拉伸整个宽度,减去这些数量:

#footer {
    border: 1px solid #000000;
    position:fixed;
    left:5px;
    right:5px;
}
body {
    margin:0;
    padding:0;
}

jsFiddle例子