html - 固定边距和宽度的位置 100% 错误

Question

我有一个简单的 div，width:100% 和 position:fixed 到底部。这是我的 CSS:

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

当我使用速记属性向左和向右应用边距时，页脚被推到右边，这很奇怪。

我创建了一个 fiddle 供您使用:Fiddle Demo

Answer 1

你可以使用 calc() :

jsFiddle example

#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，页脚将拉伸(stretch)整个宽度，减去这些量:

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

jsFiddle example